🌱 eslint - add react-query checks (#1331)

Looking at [1], add eslint rules for react-query. The rules are currently set to `error` in order to highlight what "best practices" will be enforced with this change. Fixed the reported errors for the eslint plugins: - `"@tanstack/query/prefer-query-object-syntax`: fix the `useQuery()` to use the query object syntax throughout the code base. - `@tanstack/query/exhaustive-deps`: - Fix the `queryKey` params to include all of the variables used in the `queryFn`. This is similar behavior to the `useMemo()` lint rule. - Where a `params` prop was being transformed to a string in the `queryKey`, the transform was removed. The bare `params` object is allowed to be used as part of the queryKey. - A number of warnings in the files that were touched were also resolved (some prettier, some no any type, etc). [1] - https://tanstack.com/query/latest/docs/react/eslint/eslint-plugin-query --------- Signed-off-by: Scott J Dickerson <[email protected]>
konveyor · Oct 17, 2023 · 357a54c · 357a54c
1 parent 12d8166
commit 357a54c
Show file tree

Hide file tree

Showing 21 changed files with 210 additions and 223 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -33,6 +33,7 @@ module.exports = {
     "@typescript-eslint",
     "react",
     "react-hooks",
+    "@tanstack/query",
   ],
 
   // NOTE: Tweak the rules as needed when bulk fixes get merged
@@ -55,6 +56,9 @@ module.exports = {
 
     // Allow the "cy-data" property for tackle-ui-test (but should really be "data-cy" w/o this rule)
     "react/no-unknown-property": ["error", { ignore: ["cy-data"] }],
+
+    "@tanstack/query/exhaustive-deps": "error",
+    "@tanstack/query/prefer-query-object-syntax": "error",
   },
 
   settings: {

diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
@@ -3,6 +3,7 @@ export enum MimeType {
   YAML = "yaml",
 }
 
+/** Mark an object as "New" therefore does not have an `id` field. */
 export type New<T extends { id: number }> = Omit<T, "id">;
 
 export interface HubFilter {

diff --git a/client/src/app/pages/controls/job-functions/components/job-function-form.tsx b/client/src/app/pages/controls/job-functions/components/job-function-form.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { AxiosError, AxiosResponse } from "axios";
+import { AxiosError } from "axios";
 import { object, string } from "yup";
 
 import {
@@ -70,11 +70,11 @@ export const JobFunctionForm: React.FC<JobFunctionFormProps> = ({
     mode: "all",
   });
 
-  const onCreateJobFunctionSuccess = (response: AxiosResponse<JobFunction>) => {
+  const onCreateJobFunctionSuccess = (data: JobFunction) => {
     pushNotification({
       title: t("toastr.success.createWhat", {
         type: t("terms.jobFunction"),
-        what: response.data.name,
+        what: data.name,
       }),
       variant: "success",
     });
@@ -91,7 +91,7 @@ export const JobFunctionForm: React.FC<JobFunctionFormProps> = ({
     onClose();
   };
 
-  const onCreateJobFunctionError = (error: AxiosError) => {
+  const onCreateJobFunctionError = (_error: AxiosError) => {
     pushNotification({
       title: t("toastr.fail.create", {
         type: t("terms.jobFunction").toLowerCase(),
@@ -105,7 +105,7 @@ export const JobFunctionForm: React.FC<JobFunctionFormProps> = ({
     onCreateJobFunctionError
   );
 
-  const onUpdateJobFunctionError = (error: AxiosError) => {
+  const onUpdateJobFunctionError = (_error: AxiosError) => {
     pushNotification({
       title: t("toastr.fail.save", {
         type: t("terms.jobFunction").toLowerCase(),

diff --git a/...nt/src/app/pages/reports/components/adoption-candidate-graph/adoption-candidate-graph.tsx b/...nt/src/app/pages/reports/components/adoption-candidate-graph/adoption-candidate-graph.tsx
@@ -133,19 +133,17 @@ export const AdoptionCandidateGraph: React.FC = () => {
     refetch: refreshChart,
     isFetching,
     error: fetchError,
-  } = useQuery<AssessmentConfidence[]>(
-    ["assessmentconfidence"],
-    async () =>
+  } = useQuery<AssessmentConfidence[]>({
+    queryKey: ["assessmentConfidence"],
+    queryFn: async () =>
       // (
       //   await getAssessmentConfidence(
       //     applications.length > 0 ? applications.map((f) => f.id!) : []
       //   )
       // ).data,
       [],
-    {
-      onError: (error) => console.log("error, ", error),
-    }
-  );
+    onError: (error) => console.log("error, ", error),
+  });
 
   useEffect(() => {
     refreshChart();
@@ -164,6 +162,8 @@ export const AdoptionCandidateGraph: React.FC = () => {
       const appConfidence = confidences.find(
         (elem) => elem.applicationId === current.id
       );
+
+      // TODO: This hook should be pulled outside of the useMemo
       const { review: appReview } = useFetchReviewById(current?.review?.id);
 
       if (appConfidence && appReview) {

diff --git a/...nt/src/app/pages/reports/components/adoption-candidate-table/adoption-candidate-table.tsx b/...nt/src/app/pages/reports/components/adoption-candidate-table/adoption-candidate-table.tsx
@@ -14,7 +14,6 @@ import {
 import { RISK_LIST } from "@app/Constants";
 import { Application, Assessment, Ref, Risk } from "@app/api/models";
 
-import { useFetchReviews } from "@app/queries/reviews";
 import { AppTableWithControls } from "@app/components/AppTableWithControls";
 import {
   FilterCategory,
@@ -54,7 +53,6 @@ export const AdoptionCandidateTable: React.FC<IAdoptionCandidateTable> = () => {
   // Table data
   // const { reviews } = useFetchReviews();
   const { assessments } = useFetchAssessments();
-  const { reviews } = useFetchReviews();
 
   const allRows = useMemo(() => {
     return assessments.map((assessment: Assessment) => {

diff --git a/client/src/app/pages/reports/components/adoption-plan/adoption-plan.tsx b/client/src/app/pages/reports/components/adoption-plan/adoption-plan.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import Measure from "react-measure";
 import { useTranslation } from "react-i18next";
 
@@ -41,18 +41,16 @@ export const AdoptionPlan: React.FC = () => {
     refetch: refreshChart,
     error: fetchError,
     isFetching,
-  } = useQuery<ApplicationAdoptionPlan[]>(
-    ["adoptionplan"],
-    async () =>
+  } = useQuery<ApplicationAdoptionPlan[]>({
+    queryKey: ["adoptionPlan", applications.length],
+    queryFn: async () =>
       (
         await getApplicationAdoptionPlan(
           applications.length > 0 ? applications.map((f) => f.id!) : []
         )
       ).data,
-    {
-      onError: (error) => console.log("error, ", error),
-    }
-  );
+    onError: (error) => console.log("error, ", error),
+  });
 
   useEffect(() => {
     refreshChart();

diff --git a/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx b/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx
@@ -45,19 +45,17 @@ export const IdentifiedRisksTable: React.FC<
     refetch: refreshTable,
     error: fetchError,
     isFetching,
-  } = useQuery<AssessmentQuestionRisk[]>(
-    ["assessmentquestionrisks"],
-    async () =>
+  } = useQuery<AssessmentQuestionRisk[]>({
+    queryKey: ["assessmentQuestionRisks"],
+    queryFn: async () =>
       // (
       //   await getAssessmentIdentifiedRisks(
       //     allApplications.length > 0 ? allApplications.map((f) => f.id!) : []
       //   )
       // ).data,
       [],
-    {
-      onError: (error) => console.log("error, ", error),
-    }
-  );
+    onError: (error) => console.log("error, ", error),
+  });
 
   const tableData: ITableRowData[] = useMemo(() => {
     return (assessmentQuestionRisks || []).map((risk) => ({
@@ -160,8 +158,10 @@ export const IdentifiedRisksTable: React.FC<
     filterCategories
   );
 
-  const { currentPageItems, setPageNumber, paginationProps } =
-    useLegacyPaginationState(filteredItems, 10);
+  const { currentPageItems, paginationProps } = useLegacyPaginationState(
+    filteredItems,
+    10
+  );
 
   const rows: IRow[] = [];
   currentPageItems.forEach((item) => {

diff --git a/client/src/app/queries/applications.ts b/client/src/app/queries/applications.ts
@@ -117,8 +117,9 @@ export const useDeleteApplicationMutation = (
   onError: (err: AxiosError) => void
 ) => {
   const queryClient = useQueryClient();
-  return useMutation(({ id }: { id: number }) => deleteApplication(id), {
-    onSuccess: (res) => {
+  return useMutation({
+    mutationFn: ({ id }: { id: number }) => deleteApplication(id),
+    onSuccess: (_res) => {
       onSuccess(1);
       queryClient.invalidateQueries([ApplicationsQueryKey]);
     },
@@ -131,16 +132,14 @@ export const useBulkDeleteApplicationMutation = (
   onError: (err: AxiosError) => void
 ) => {
   const queryClient = useQueryClient();
-  return useMutation(
-    ({ ids }: { ids: number[] }) => deleteBulkApplications(ids),
-    {
-      onSuccess: (res, vars) => {
-        onSuccess(vars.ids.length);
-        queryClient.invalidateQueries([ApplicationsQueryKey]);
-      },
-      onError: onError,
-    }
-  );
+  return useMutation({
+    mutationFn: ({ ids }: { ids: number[] }) => deleteBulkApplications(ids),
+    onSuccess: (res, vars) => {
+      onSuccess(vars.ids.length);
+      queryClient.invalidateQueries([ApplicationsQueryKey]);
+    },
+    onError: onError,
+  });
 };
 
 export const downloadStaticReport = async ({
@@ -182,7 +181,7 @@ export const downloadStaticReport = async ({
 };
 
 export const useDownloadStaticReport = () => {
-  return useMutation(downloadStaticReport);
+  return useMutation({ mutationFn: downloadStaticReport });
 };
 
 export const useFetchApplicationDependencies = (
@@ -193,23 +192,21 @@ export const useFetchApplicationDependencies = (
     error: northError,
     isLoading: isLoadingNorth,
     refetch: refetchNorth,
-  } = useQuery<ApplicationDependency[], AxiosError>(
-    [ApplicationDependencyQueryKey, "north"],
-    () => getApplicationDependencies({ to: [`${applicationId}`] }),
-    {
-      enabled: !!applicationId,
-    }
-  );
+  } = useQuery<ApplicationDependency[], AxiosError>({
+    queryKey: [ApplicationDependencyQueryKey, applicationId, "north"],
+    queryFn: () => getApplicationDependencies({ to: [`${applicationId}`] }),
+    enabled: !!applicationId,
+  });
 
   const {
     data: southData,
     error: southError,
     isLoading: isLoadingSouth,
     refetch: refetchSouth,
-  } = useQuery<ApplicationDependency[], AxiosError>(
-    [ApplicationDependencyQueryKey, "south"],
-    () => getApplicationDependencies({ from: [`${applicationId}`] })
-  );
+  } = useQuery<ApplicationDependency[], AxiosError>({
+    queryKey: [ApplicationDependencyQueryKey, applicationId, "south"],
+    queryFn: () => getApplicationDependencies({ from: [`${applicationId}`] }),
+  });
 
   const isFetching = isLoadingNorth || isLoadingSouth;
   const fetchError = northError || southError;
@@ -241,7 +238,8 @@ export const useCreateApplicationDependency = ({
 }: UseCreateApplicationDependencyOptions = {}) => {
   const queryClient = useQueryClient();
 
-  return useMutation(createApplicationDependency, {
+  return useMutation({
+    mutationFn: createApplicationDependency,
     onSuccess: () => {
       queryClient.invalidateQueries([ApplicationDependencyQueryKey]);
       if (onSuccess) {
@@ -259,7 +257,8 @@ export const useCreateApplicationDependency = ({
 export const useDeleteApplicationDependency = () => {
   const queryClient = useQueryClient();
 
-  return useMutation(deleteApplicationDependency, {
+  return useMutation({
+    mutationFn: deleteApplicationDependency,
     onSuccess: () => {
       queryClient.invalidateQueries([ApplicationDependencyQueryKey]);
     },

diff --git a/client/src/app/queries/assessments.ts b/client/src/app/queries/assessments.ts
@@ -129,10 +129,10 @@ export const useFetchAssessmentsByItemId = (
   itemId?: number | string
 ) => {
   const { data, isLoading, error } = useQuery({
-    queryKey: [assessmentsByItemIdQueryKey, itemId],
+    queryKey: [assessmentsByItemIdQueryKey, itemId, isArchetype],
     queryFn: () => getAssessmentsByItemId(isArchetype, itemId),
     onError: (error: AxiosError) => console.log("error, ", error),
-    onSuccess: (data) => {},
+    onSuccess: (_data) => {},
     enabled: !!itemId,
   });
 

diff --git a/client/src/app/queries/dependencies.ts b/client/src/app/queries/dependencies.ts
@@ -6,7 +6,6 @@ import {
   HubRequestParams,
 } from "@app/api/models";
 import { getAppDependencies, getDependencies } from "@app/api/rest";
-import { serializeRequestParamsForHub } from "@app/hooks/table-controls/getHubRequestParams";
 
 export interface IDependenciesFetchState {
   result: HubPaginatedResult<AnalysisDependency>;
@@ -22,16 +21,13 @@ export interface IAppDependenciesFetchState {
 }
 
 export const DependenciesQueryKey = "dependencies";
-export const AppDependenciesQueryKey = "appdependencies";
+export const AppDependenciesQueryKey = "appDependencies";
 
 export const useFetchDependencies = (
   params: HubRequestParams = {}
 ): IDependenciesFetchState => {
   const { data, isLoading, error, refetch } = useQuery({
-    queryKey: [
-      DependenciesQueryKey,
-      serializeRequestParamsForHub(params).toString(),
-    ],
+    queryKey: [DependenciesQueryKey, params],
     queryFn: async () => await getDependencies(params),
     onError: (error) => console.log("error, ", error),
     keepPreviousData: true,
@@ -48,10 +44,7 @@ export const useFetchAppDependencies = (
   params: HubRequestParams = {}
 ): IAppDependenciesFetchState => {
   const { data, isLoading, error, refetch } = useQuery({
-    queryKey: [
-      AppDependenciesQueryKey,
-      serializeRequestParamsForHub(params).toString(),
-    ],
+    queryKey: [AppDependenciesQueryKey, params],
     queryFn: async () => await getAppDependencies(params),
     onError: (error) => console.log("error, ", error),
     keepPreviousData: true,

diff --git a/client/src/app/queries/facts.ts b/client/src/app/queries/facts.ts
@@ -7,16 +7,14 @@ import { Fact } from "@app/api/models";
 export const FactsQueryKey = "facts";
 
 export const useFetchFacts = (applicationID: number | string | undefined) => {
-  const { data, isLoading, error, refetch } = useQuery(
-    [FactsQueryKey, applicationID],
-    {
-      queryFn: () => getFacts(applicationID),
-      enabled: !!applicationID,
-      onError: (error: AxiosError) => console.log("error, ", error),
-      select: (facts): Fact[] =>
-        Object.keys(facts).map((fact) => ({ name: fact, data: facts[fact] })),
-    }
-  );
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: [FactsQueryKey, applicationID],
+    queryFn: () => getFacts(applicationID),
+    enabled: !!applicationID,
+    onError: (error: AxiosError) => console.log("error, ", error),
+    select: (facts): Fact[] =>
+      Object.keys(facts).map((fact) => ({ name: fact, data: facts[fact] })),
+  });
 
   return {
     facts: data || [],

diff --git a/client/src/app/queries/identities.ts b/client/src/app/queries/identities.ts
@@ -16,7 +16,8 @@ export const useUpdateIdentityMutation = (
   onError: (err: AxiosError) => void
 ) => {
   const queryClient = useQueryClient();
-  const { isLoading, mutate, error } = useMutation(updateIdentity, {
+  const { isLoading, mutate, error } = useMutation({
+    mutationFn: updateIdentity,
     onSuccess: (res) => {
       onSuccess(res);
       queryClient.invalidateQueries([IdentitiesQueryKey]);
@@ -37,7 +38,8 @@ export const useCreateIdentityMutation = (
   onError: (err: AxiosError) => void
 ) => {
   const queryClient = useQueryClient();
-  const { isLoading, mutate, error } = useMutation(createIdentity, {
+  const { isLoading, mutate, error } = useMutation({
+    mutationFn: createIdentity,
     onSuccess: (res) => {
       onSuccess(res);
       queryClient.invalidateQueries([IdentitiesQueryKey]);
@@ -54,13 +56,11 @@ export const useCreateIdentityMutation = (
 };
 
 export const useFetchIdentities = () => {
-  const { data, isLoading, error, refetch } = useQuery(
-    [IdentitiesQueryKey],
-    async () => (await getIdentities()).data,
-    {
-      onError: (error) => console.log("error, ", error),
-    }
-  );
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: [IdentitiesQueryKey],
+    queryFn: async () => (await getIdentities()).data,
+    onError: (error) => console.log("error, ", error),
+  });
   return {
     identities: data || [],
     isFetching: isLoading,