chore: Upgrade react-query to v5

Author: DanielMarkiel

.github/workflows/e2e_android.yml

@@ -1,8 +1,5 @@
 name: E2E Android
 on:
-  push:
-    branches:
-      - master
   workflow_call:
 
 jobs:

.github/workflows/e2e_ios.yml

@@ -1,8 +1,5 @@
 name: E2E iOS
 on:
-  push:
-    branches:
-      - master
   workflow_call:
 
 jobs:

Gemfile.lock

@@ -109,7 +109,7 @@ GEM
       xcodeproj (>= 1.13.0, < 2.0.0)
       xcpretty (~> 0.3.0)
       xcpretty-travis-formatter (>= 0.0.3, < 2.0.0)
-    fastlane-plugin-firebase_app_distribution (0.9.0)
+    fastlane-plugin-firebase_app_distribution (0.9.1)
       google-apis-firebaseappdistribution_v1 (~> 0.3.0)
       google-apis-firebaseappdistribution_v1alpha (~> 0.2.0)
     fastlane-plugin-increment_version_code (0.4.3)
@@ -165,7 +165,7 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     multi_json (1.15.0)
-    multipart-post (2.4.0)
+    multipart-post (2.4.1)
     nanaimo (0.3.0)
     naturally (2.2.1)
     nkf (0.2.0)
@@ -179,7 +179,8 @@ GEM
       trailblazer-option (>= 0.1.1, < 0.2.0)
       uber (< 0.2.0)
     retriable (3.1.2)
-    rexml (3.2.6)
+    rexml (3.2.8)
+      strscan (>= 3.0.9)
     rouge (2.0.7)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
@@ -192,6 +193,7 @@ GEM
     simctl (1.6.10)
       CFPropertyList
       naturally
+    strscan (3.1.0)
     terminal-notifier (2.0.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)

package.json

@@ -27,7 +27,7 @@
     "@react-navigation/drawer": "^6.6.15",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.3.29",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.36.2",
     "axios": "^1.6.8",
     "fast-text-encoding": "^1.0.6",
     "nativewind": "^4.0.36",

src/context/auth/authContextController/AuthContextController.tsx

@@ -24,7 +24,7 @@ export const AuthContextController = ({ children }: AuthContextControllerProps)
     },
   );
 
-  const { mutateAsync: login, isLoading: isAuthenticating } = useMutation('loginMutation', {
+  const { mutateAsync: login, isPending: isAuthenticating } = useMutation('loginMutation', {
     onSuccess: (res) => {
       dispatch(
         setTokens({
@@ -45,21 +45,25 @@ export const AuthContextController = ({ children }: AuthContextControllerProps)
     isLoadingAndEnabled,
     isSuccess: isUserSuccess,
     remove: resetUser,
+    isError: isUserError,
   } = useUser({
     enabled: !!state.accessToken,
-    onError: () => {
-      dispatch(resetTokens());
-    },
   });
 
+  useEffect(() => {
+    if (isUserError) {
+      dispatch(resetTokens());
+    }
+  }, [isUserError]);
+
   const logout = useCallback(() => {
     resetUser();
     dispatch(resetTokens());
   }, [resetUser]);
 
   useEffect(() => {
     setAuthStorage(state);
-  }, [state]);
+  }, [state, setAuthStorage]);
 
   const value: AuthContextValue = useMemo(
     () => ({

src/hooks/useInifiniteQuery/useInfiniteQuery.ts

@@ -1,11 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import {
-  QueryKey,
-  useInfiniteQuery as useRQInfiniteQuery,
-  UseInfiniteQueryOptions,
-  UseInfiniteQueryResult,
-} from '@tanstack/react-query';
+import { QueryKey, useInfiniteQuery as useRQInfiniteQuery, UseInfiniteQueryOptions } from '@tanstack/react-query';
 
 import { AxiosInfiniteQueriesType, queries } from 'api/actions';
 import { DataForQuery, GetQueryParams } from 'api/types/types';
@@ -20,15 +13,16 @@ import { useApiClient } from 'hooks/useApiClient/useApiClient';
 export const useInfiniteQuery = <Key extends keyof AxiosInfiniteQueriesType, TError = unknown>(
   query: Key,
   args?: GetQueryParams<Key>,
-  options?: UseInfiniteQueryOptions<DataForQuery<Key>, TError>,
+  options?: Omit<UseInfiniteQueryOptions<DataForQuery<Key>, TError>, 'queryKey' | 'queryFn'>,
 ) => {
   const { client } = useApiClient();
   const queryFn = queries[query](client);
   const queryKey: QueryKey = [query];
 
-  return useRQInfiniteQuery(
+  return useRQInfiniteQuery<DataForQuery<Key>, TError>({
     queryKey,
-    async ({ pageParam }: { pageParam?: string }) => await queryFn({ pageParam, ...(args || {}) }),
-    options as any,
-  ) as UseInfiniteQueryResult<DataForQuery<Key>, TError>;
+    queryFn: async ({ pageParam }: { pageParam?: string }) => await queryFn({ pageParam, ...(args || {}) }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ...(options as any),
+  });
 };

src/hooks/useMutation/useMutation.ts

@@ -1,9 +1,4 @@
-import {
-  UseMutationResult,
-  useMutation as useRQMutation,
-  UseMutationOptions,
-  MutationKey,
-} from '@tanstack/react-query';
+import { useMutation as useRQMutation, UseMutationOptions, MutationKey } from '@tanstack/react-query';
 
 import { AxiosMutationsType, mutations } from 'api/actions';
 import { useApiClient } from 'hooks/useApiClient/useApiClient';
@@ -25,10 +20,10 @@ export const useMutation = <Key extends keyof AxiosMutationsType, TError = unkno
   const mutationFn = mutations[mutation](client);
   const mutationKey: MutationKey = [mutation];
 
-  return useRQMutation(
+  return useRQMutation<DataForMutation<Key>, TError, GetMutationParams<Key>>({
     mutationKey,
-    async (args) => await mutationFn(args),
+    mutationFn: async (args) => await mutationFn(args),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    options as any,
-  ) as UseMutationResult<DataForMutation<Key>, TError, GetMutationParams<Key>>;
+    ...(options as any),
+  });
 };

src/hooks/useQuery/useQuery.test.tsx

@@ -67,7 +67,7 @@ describe('useQuery', () => {
       ),
     });
 
-    expect(result.current.status).toBe('loading');
+    expect(result.current.status).toBe('pending');
     await waitFor(() => {
       expect(result.current.status).toBe('error');
     });

src/hooks/useQuery/useQuery.ts

@@ -1,4 +1,5 @@
-import { QueryKey, UseQueryResult, UseQueryOptions, useQuery as useRQQuery } from '@tanstack/react-query';
+import { QueryKey, UseQueryOptions, useQuery as useRQQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
 
 import { AxiosQueriesType, queries } from 'api/actions';
 import { DataForQuery, GetQueryParams } from 'api/types/types';
@@ -8,18 +9,25 @@ import { parseQueryKey } from 'utils/parseQueryKey';
 export const useQuery = <Key extends keyof AxiosQueriesType, TError = unknown>(
   query: Key,
   args: GetQueryParams<Key>,
-  options?: UseQueryOptions<DataForQuery<Key>, TError>,
+  options?: Omit<UseQueryOptions<DataForQuery<Key>, TError>, 'queryKey' | 'queryFn'>,
 ) => {
   const { client } = useApiClient();
+  const queryClient = useQueryClient();
   const queryFn = queries[query](client);
   const queryKey: QueryKey = parseQueryKey(query, args);
 
-  const result = useRQQuery(
+  const result = useRQQuery<DataForQuery<Key>, TError>({
     queryKey,
-    async () => await queryFn(args),
+    queryFn: async () => await queryFn(args),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    options as any,
-  ) as UseQueryResult<DataForQuery<Key>, TError>;
+    ...(options as any),
+  });
 
-  return { ...result, isLoadingAndEnabled: result.isLoading && result.fetchStatus !== 'idle' };
+  const remove = useCallback(() => queryClient.removeQueries({ queryKey }), [queryClient, queryKey]);
+
+  return {
+    ...result,
+    isLoadingAndEnabled: result.isLoading && result.fetchStatus !== 'idle',
+    remove,
+  };
 };

src/hooks/useUser/useUser.ts

@@ -4,6 +4,6 @@ import { GetMeQueryResponse } from 'api/actions/auth/auth.types';
 
 import { useQuery } from '../useQuery/useQuery';
 
-export const useUser = (options?: UseQueryOptions<GetMeQueryResponse>) => {
+export const useUser = (options?: Omit<UseQueryOptions<GetMeQueryResponse>, 'queryKey' | 'queryFn'>) => {
   return useQuery('getCurrentUser', {}, options);
 };