chore(deps): migrates TanStack Query to v5

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx --no-install commitlint --edit "$1"

.husky/post-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn post-commit

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn pre-commit

.husky/pre-push

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn build && yarn test:ci

package.json

@@ -24,8 +24,8 @@
     "Thibault Reidy"
   ],
   "dependencies": {
-    "@tanstack/react-query": "4.36.1",
-    "@tanstack/react-query-devtools": "4.36.1",
+    "@tanstack/react-query": "5.52.0",
+    "@tanstack/react-query-devtools": "5.52.0",
     "axios": "1.7.7",
     "http-status-codes": "2.3.0"
   },

src/.d.ts

@@ -0,0 +1,15 @@
+// https://github.com/TanStack/query/discussions/2772#discussioncomment-7566892
+import '@tanstack/react-query';
+
+import { Routine } from './types.ts';
+
+interface Meta extends Record<string, unknown> {
+  routine?: Routine;
+}
+
+declare module '@tanstack/react-query' {
+  interface Register {
+    queryMeta: Meta;
+    mutationMeta: Meta;
+  }
+}

src/hooks/invitation.ts

@@ -9,7 +9,7 @@ import { getInvitationRoutine } from '../routines/invitation.js';
 import { QueryClientConfig } from '../types.js';
 
 export default (queryConfig: QueryClientConfig) => {
-  const { notifier, defaultQueryOptions } = queryConfig;
+  const { defaultQueryOptions } = queryConfig;
 
   const useInvitation = (id?: UUID) =>
     useQuery({
@@ -20,11 +20,11 @@ export default (queryConfig: QueryClientConfig) => {
         }
         return Api.getInvitation(queryConfig, id);
       },
+      meta: {
+        routine: getInvitationRoutine,
+      },
       ...defaultQueryOptions,
       enabled: Boolean(id),
-      onError: (error) => {
-        notifier?.({ type: getInvitationRoutine.FAILURE, payload: { error } });
-      },
     });
 
   const useItemInvitations = (

src/hooks/itemGeolocation.ts

@@ -20,7 +20,7 @@ import { QueryClientConfig } from '../types.js';
 import useDebounce from './useDebounce.js';
 
 export default (queryConfig: QueryClientConfig) => {
-  const { notifier, defaultQueryOptions } = queryConfig;
+  const { defaultQueryOptions } = queryConfig;
 
   const useItemGeolocation = (id?: DiscriminatedItem['id']) =>
     useQuery({
@@ -33,11 +33,8 @@ export default (queryConfig: QueryClientConfig) => {
       },
       ...defaultQueryOptions,
       enabled: Boolean(id),
-      onError: (error) => {
-        notifier?.({
-          type: getItemGeolocationRoutine.FAILURE,
-          payload: { error },
-        });
+      meta: {
+        routine: getItemGeolocationRoutine,
       },
     });
 
@@ -115,11 +112,8 @@ export default (queryConfig: QueryClientConfig) => {
       },
       ...defaultQueryOptions,
       enabled: Boolean((lat || lat === 0) && (lng || lng === 0)) && enabled,
-      onError: (error) => {
-        notifier?.({
-          type: getAddressFromCoordinatesRoutine.FAILURE,
-          payload: { error },
-        });
+      meta: {
+        routine: getAddressFromCoordinatesRoutine,
       },
     });
   };
@@ -155,11 +149,8 @@ export default (queryConfig: QueryClientConfig) => {
       },
       ...defaultQueryOptions,
       enabled: Boolean(debouncedAddress) && enabled,
-      onError: (error) => {
-        notifier?.({
-          type: getSuggestionsForAddressRoutine.FAILURE,
-          payload: { error },
-        });
+      meta: {
+        routine: getSuggestionsForAddressRoutine,
       },
     });
   };

src/hooks/itemPublish.ts

@@ -1,6 +1,6 @@
 import { ItemPublished, MAX_TARGETS_FOR_READ_REQUEST, UUID } from '@graasp/sdk';
 
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { splitRequestByIdsAndReturn } from '../api/axios.js';
 import * as Api from '../api/itemPublish.js';
@@ -97,7 +97,7 @@ export default (queryConfig: QueryClientConfig) => {
     ) => {
       const enabled =
         (options?.enabled ?? true) && Boolean(args.itemIds.length);
-      const queryClient = useQueryClient();
+
       return useQuery({
         queryKey: itemKeys.many(args.itemIds).publishedInformation,
         queryFn: () =>
@@ -107,18 +107,6 @@ export default (queryConfig: QueryClientConfig) => {
             (chunk) => Api.getManyItemPublishedInformations(chunk, queryConfig),
             true,
           ),
-        onSuccess: async (publishedData) => {
-          // save items in their own key
-          if (publishedData?.data) {
-            Object.values(publishedData?.data)?.forEach(async (p) => {
-              const { id } = p.item;
-              queryClient.setQueryData(
-                itemKeys.single(id).publishedInformation,
-                p,
-              );
-            });
-          }
-        },
         ...defaultQueryOptions,
         enabled,
       });

src/hooks/itemTag.test.ts

@@ -105,11 +105,6 @@ describe('Item Tags Hooks', () => {
       const { data, isSuccess } = await mockHook({ endpoints, hook, wrapper });
       expect(data).toEqual(response);
 
-      // verify cache keys
-      keys.forEach((key, idx) =>
-        expect(queryClient.getQueryData<ItemTag>(key)).toEqual(tags[idx]),
-      );
-
       expect(isSuccess).toBeTruthy();
     });
 
@@ -152,15 +147,6 @@ describe('Item Tags Hooks', () => {
       });
 
       expect(data).toEqual(response);
-
-      // verify cache keys
-      expect(
-        queryClient.getQueryData<ItemTag>(itemKeys.single(ids[0]).tags),
-      ).toEqual(tagsForItem);
-      expect(
-        queryClient.getQueryData(itemKeys.single(idWithError).tags),
-      ).toBeFalsy();
-
       expect(isSuccess).toBeTruthy();
     });
 

src/hooks/itemTag.ts

@@ -1,6 +1,6 @@
 import { MAX_TARGETS_FOR_READ_REQUEST, UUID } from '@graasp/sdk';
 
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { splitRequestByIdsAndReturn } from '../api/axios.js';
 import * as Api from '../api/itemTag.js';
@@ -25,7 +25,6 @@ export default (queryConfig: QueryClientConfig) => {
     });
 
   const useItemsTags = (ids?: UUID[]) => {
-    const queryClient = useQueryClient();
     return useQuery({
       queryKey: itemKeys.many(ids).tags,
       queryFn: () => {
@@ -39,16 +38,7 @@ export default (queryConfig: QueryClientConfig) => {
           true,
         );
       },
-      onSuccess: async (tags) => {
-        // save tags in their own key
-        ids?.forEach(async (id) => {
-          const itemTags = tags?.data?.[id];
-          if (itemTags?.length) {
-            queryClient.setQueryData(itemKeys.single(id).tags, itemTags);
-          }
-        });
-      },
-      enabled: Boolean(ids && ids.length),
+      enabled: Boolean(ids?.length),
       ...defaultQueryOptions,
     });
   };

src/hooks/membership.ts

@@ -4,7 +4,7 @@ import {
   WebsocketClient,
 } from '@graasp/sdk';
 
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { splitRequestByIdsAndReturn } from '../api/axios.js';
 import * as Api from '../api/membership.js';
@@ -52,7 +52,6 @@ export default (
       ids?: UUID[],
       options?: { getUpdates?: boolean },
     ) => {
-      const queryClient = useQueryClient();
       const getUpdates = options?.getUpdates ?? enableWebsocket;
 
       membershipWsHooks?.useItemsMembershipsUpdates(getUpdates ? ids : null);
@@ -70,17 +69,6 @@ export default (
             (chunk) => Api.getMembershipsForItems(chunk, queryConfig),
           );
         },
-        onSuccess: async (memberships) => {
-          // save memberships in their own key
-          if (memberships) {
-            ids?.forEach(async (id) => {
-              queryClient.setQueryData(
-                itemKeys.single(id).memberships,
-                memberships.data[id],
-              );
-            });
-          }
-        },
         enabled: Boolean(ids?.length) && ids?.every((id) => Boolean(id)),
         ...defaultQueryOptions,
       });

src/item/accessible/hooks.test.ts

@@ -108,12 +108,6 @@ describe('useInfiniteAccessibleItems', () => {
       queryClient.getQueryData<{ pages: Paginated<PackedItem>[] }>(key)!
         .pages[0],
     ).toMatchObject(response);
-
-    for (const item of response.data) {
-      expect(
-        queryClient.getQueryData<PackedItem>(itemKeys.single(item.id).content),
-      ).toMatchObject(item);
-    }
   });
 
   it(`calling nextPage accumulate items`, async () => {

src/item/accessible/hooks.ts

@@ -1,10 +1,6 @@
 import { Pagination } from '@graasp/sdk';
 
-import {
-  useInfiniteQuery,
-  useQuery,
-  useQueryClient,
-} from '@tanstack/react-query';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 
 import useDebounce from '../../hooks/useDebounce.js';
 import { itemKeys } from '../../keys.js';
@@ -24,29 +20,17 @@ import { getAccessibleItems } from './api.js';
 export const useAccessibleItems =
   (queryConfig: QueryClientConfig) =>
   (params?: ItemSearchParams, pagination?: Partial<Pagination>) => {
-    const { notifier, defaultQueryOptions } = queryConfig;
-
-    const queryClient = useQueryClient();
-
+    const { defaultQueryOptions } = queryConfig;
     const debouncedKeywords = useDebounce(params?.keywords, 500);
     const finalParams = { ...params, keywords: debouncedKeywords };
     const paginationParams = { ...(pagination ?? {}) };
+
     return useQuery({
       queryKey: itemKeys.accessiblePage(finalParams, paginationParams),
       queryFn: () =>
         getAccessibleItems(finalParams, paginationParams, queryConfig),
-      onSuccess: async ({ data: items }) => {
-        // save items in their own key
-        items?.forEach(async (item) => {
-          const { id } = item;
-          queryClient.setQueryData(itemKeys.single(id).content, item);
-        });
-      },
-      onError: (error) => {
-        notifier?.({
-          type: getAccessibleItemsRoutine.FAILURE,
-          payload: { error },
-        });
+      meta: {
+        routine: getAccessibleItemsRoutine,
       },
       ...defaultQueryOptions,
     });
@@ -62,7 +46,6 @@ export const useAccessibleItems =
 export const useInfiniteAccessibleItems =
   (queryConfig: QueryClientConfig) =>
   (params?: ItemSearchParams, pagination?: Partial<Pagination>) => {
-    const queryClient = useQueryClient();
     const debouncedKeywords = useDebounce(params?.keywords, 500);
     const finalParams = { ...params, keywords: debouncedKeywords };
 
@@ -74,16 +57,8 @@ export const useInfiniteAccessibleItems =
           { page: pageParam ?? 1, ...pagination },
           queryConfig,
         ),
-      onSuccess: async ({ pages }) => {
-        // save items in their own key
-        for (const p of pages) {
-          p?.data?.forEach(async (item) => {
-            const { id } = item;
-            queryClient.setQueryData(itemKeys.single(id).content, item);
-          });
-        }
-      },
       getNextPageParam: (_lastPage, pages) => pages.length + 1,
       refetchOnWindowFocus: () => false,
+      initialPageParam: 1,
     });
   };