Merge pull request #176 from TheSoftwareHouse/feat/ZN-572/update-react-query

feat: update react query to V5

Author: qh4r

package-lock.json

@@ -53,8 +53,8 @@
   "dependencies": {
     "@sentry/browser": "8.8.0",
     "@sentry/integrations": "7.110.0",
-    "@tanstack/react-query": "4.36.1",
-    "@tanstack/react-query-devtools": "4.35.0",
+    "@tanstack/react-query": "5.45.1",
+    "@tanstack/react-query-devtools": "5.45.1",
     "@tanstack/react-router": "1.29.2",
     "axios": "1.6.8",
     "clsx": "2.1.0",

package.json

@@ -1,29 +1,47 @@
 import { AxiosInstance } from 'axios';
 import { stringify } from 'qs';
 
-import {
-  GetMeQueryResponse,
-  GetUsersInfiniteArgs,
-  GetUsersListArgs,
-  GetUsersResponse,
-  // QUERY_TYPE_IMPORTS
-} from './auth.types';
+import { queryFactoryOptions, infiniteQueryFactoryOptions } from '../../utils/queryFactoryOptions';
+
+import { GetMeQueryResponse, GetUsersInfiniteArgs, GetUsersListArgs, GetUsersResponse } from './auth.types';
+
+const getCurrentUser = (client: AxiosInstance) => async () => {
+  return (await client.get<GetMeQueryResponse>('/me')).data;
+};
+
+const getUsersInfinite =
+  (client: AxiosInstance, { count = '5' }: GetUsersInfiniteArgs) =>
+  async ({ pageParam = '1' }) => {
+    const queryParams = stringify({ page: pageParam, count }, { addQueryPrefix: true });
+    return (await client.get<GetUsersResponse>(`/users/${queryParams}`)).data;
+  };
+
+const getUsersList =
+  (client: AxiosInstance, { page = '1' }: GetUsersListArgs) =>
+  async () => {
+    const queryParams = stringify({ page, count: 5 }, { addQueryPrefix: true });
+    return (await client.get<GetUsersResponse>(`/users/${queryParams}`)).data;
+  };
 
 export const authQueries = {
-  getCurrentUser: (client: AxiosInstance) => async () => {
-    return (await client.get<GetMeQueryResponse>('/me')).data;
-  },
-  getUsersInfinite:
-    (client: AxiosInstance) =>
-    async ({ pageParam = '1', count = '5' }: GetUsersInfiniteArgs) => {
-      const queryParams = stringify({ page: pageParam, count: count }, { addQueryPrefix: true });
-      return (await client.get<GetUsersResponse>(`/users/${queryParams}`)).data;
-    },
-  getUsersList:
-    (client: AxiosInstance) =>
-    async ({ page = '1' }: GetUsersListArgs) => {
-      const queryParams = stringify({ page, count: 5 }, { addQueryPrefix: true });
-      return (await client.get<GetUsersResponse>(`/users/${queryParams}`)).data;
-    },
-  // QUERY_FUNCTIONS_SETUP
+  all: () => ['users'],
+  me: () =>
+    queryFactoryOptions({
+      queryKey: [...authQueries.all(), 'me'],
+      queryFn: getCurrentUser,
+    }),
+  lists: () => [...authQueries.all(), 'list'],
+  list: (params: GetUsersListArgs) =>
+    queryFactoryOptions({
+      queryKey: [...authQueries.lists(), params],
+      queryFn: (client) => getUsersList(client, params),
+    }),
+  listsInfinite: () => [...authQueries.lists(), 'infinite'],
+  listInfinite: (params: GetUsersInfiniteArgs) =>
+    infiniteQueryFactoryOptions({
+      queryKey: [...authQueries.listsInfinite(), params],
+      queryFn: (client) => getUsersInfinite(client, params),
+      initialPageParam: '1',
+      getNextPageParam: ({ nextPage }) => nextPage?.toString(),
+    }),
 };

src/api/actions/auth/auth.queries.ts

@@ -27,7 +27,6 @@ export type GetUsersResponse = {
 };
 
 export type GetUsersInfiniteArgs = {
-  pageParam?: string;
   count?: string;
 };
 

src/api/actions/auth/auth.types.ts

@@ -1,15 +1,4 @@
 import { authMutations } from './auth/auth.mutations';
-import { authQueries } from './auth/auth.queries';
-// API_COLLECTION_IMPORTS
-
-export const queries = {
-  ...authQueries,
-  // API_COLLECTION_QUERIES
-} as const;
-
-export type AxiosQueriesType = typeof queries;
-
-export type AxiosInfiniteQueriesType = Pick<AxiosQueriesType, 'getUsersInfinite'>;
 
 export const mutations = {
   ...authMutations,

src/api/actions/index.ts

@@ -2,26 +2,10 @@
 import { QueryMeta } from '@tanstack/react-query';
 import { AxiosRequestConfig } from 'axios';
 
-import { AxiosQueriesType } from 'api/actions';
-
 export type MutationHTTPMethod = 'DELETE' | 'POST' | 'PUT' | 'PATCH';
 
 export type Unwrap<T> = T extends PromiseLike<infer U> ? U : T;
 
-export type GetQueryParams<Key extends keyof AxiosQueriesType> = ReturnType<AxiosQueriesType[Key]> extends (
-  value: infer Params,
-) => any
-  ? Params extends Parameters<ReturnType<AxiosQueriesType[keyof AxiosQueriesType]>>[0]
-    ? Params
-    : any
-  : never;
-
-export type DataForQuery<TQueryKey extends keyof AxiosQueriesType> = Unwrap<
-  ReturnType<ReturnType<AxiosQueriesType[TQueryKey]>>
->;
-
-export type ArgsForQuery<TQueryKey extends keyof AxiosQueriesType> = GetQueryParams<TQueryKey>;
-
 export type ExtendedQueryMeta = QueryMeta & {
   error: { excludedCodes: number[]; showGlobalError: boolean };
 };

src/api/types/types.ts

@@ -0,0 +1,15 @@
+import { StandardizedApiError } from 'context/apiClient/apiClientContextController/apiError/apiError.types';
+import { UseInfiniteQueryOptions } from 'hooks/useInfiniteQuery/useInfiniteQuery.types';
+import { UseQueryOptions } from 'hooks/useQuery/useQuery.types';
+
+export const queryFactoryOptions = <TQueryFnData = unknown, TError = StandardizedApiError>(
+  options: UseQueryOptions<TQueryFnData, TError>,
+) => options;
+
+export const infiniteQueryFactoryOptions = <
+  TQueryFnData = unknown,
+  TPageParam = unknown,
+  TError = StandardizedApiError,
+>(
+  options: UseInfiniteQueryOptions<TQueryFnData, TError, TPageParam>,
+) => options;

src/api/utils/queryFactoryOptions.ts

@@ -8,7 +8,7 @@ import { useHandleQueryErrors } from 'hooks/useHandleQueryErrors/useHandleQueryE
 import { ExtendedQueryMeta } from 'api/types/types';
 
 import { ApiClientControllerProps } from './ApiClientContextController.types';
-import { ApiError } from './apiError/apiError.types';
+import { StandardizedApiError } from './apiError/apiError.types';
 
 const metaErrorConfig = { error: { showGlobalError: true, excludedCodes: [] } };
 
@@ -17,14 +17,14 @@ export const ApiClientContextController = ({ children }: ApiClientControllerProp
 
   const mutationCache = new MutationCache({
     onError: (err, variables, context, mutation) => {
-      const error = err as ApiError;
+      const error = err as StandardizedApiError;
       shouldHandleGlobalError((mutation.meta as ExtendedQueryMeta)?.error, error?.statusCode) && handleErrors(error);
     },
   });
 
   const queryCache = new QueryCache({
     onError: (err, query) => {
-      const error = err as ApiError;
+      const error = err as StandardizedApiError;
 
       shouldHandleGlobalError((query.meta as ExtendedQueryMeta)?.error, error?.statusCode) && handleErrors(error);
     },

src/context/apiClient/apiClientContextController/ApiClientContextController.tsx

@@ -19,7 +19,7 @@ describe('getStandardizedApiError', () => {
     };
     const mockAxiosError = getMockAxiosError(errorData);
 
-    expect(getStandardizedApiError(mockAxiosError)).toEqual({
+    expect(getStandardizedApiError(mockAxiosError)).toMatchObject({
       type: 'basic',
       statusCode: 400,
       data: errorData,
@@ -35,7 +35,7 @@ describe('getStandardizedApiError', () => {
     };
     const mockAxiosError = getMockAxiosError(errorData);
 
-    expect(getStandardizedApiError(mockAxiosError)).toEqual({
+    expect(getStandardizedApiError(mockAxiosError)).toMatchObject({
       type: 'form',
       statusCode: 400,
       data: errorData,
@@ -51,7 +51,7 @@ describe('getStandardizedApiError', () => {
     };
     const mockAxiosError = getMockAxiosError(errorData);
 
-    expect(getStandardizedApiError(mockAxiosError)).toEqual({
+    expect(getStandardizedApiError(mockAxiosError)).toMatchObject({
       statusCode: 400,
       type: 'unknown',
       data: errorData,