feat(react-data-query): upgrade tanstack query to v5

packages/react-data-query/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- **BREAKING:** Upgrade `@tanstack/query-core` and `@tanstack/react-query` from `^4.43.0` to `^5.62.16` ([#9563](https://github.com/MetaMask/core/pull/9563))
+  - `createUIQueryClient`'s `invalidateQueries` override now matches the TanStack Query v5 signature (`filters`, `options`) instead of the v4 overload style that relied on `parseFilterArgs`.
+  - Consumers must migrate to TanStack Query v5 APIs (for example `gcTime` instead of `cacheTime`, and `initialPageParam` for infinite queries).
+
 ## [0.2.2]
 
 ### Changed

packages/react-data-query/package.json

@@ -55,8 +55,8 @@
   "dependencies": {
     "@metamask/base-data-service": "^0.1.3",
     "@metamask/utils": "^11.11.0",
-    "@tanstack/query-core": "^4.43.0",
-    "@tanstack/react-query": "^4.43.0"
+    "@tanstack/query-core": "^5.62.16",
+    "@tanstack/react-query": "^5.62.16"
   },
   "devDependencies": {
     "@metamask/auto-changelog": "^6.1.0",

packages/react-data-query/src/createUIQueryClient.test.ts

@@ -261,7 +261,7 @@ describe('createUIQueryClient', () => {
 
     await Promise.all([promiseA, promiseB]);
 
-    // Advance the full cacheTime of ExampleDataService
+    // Advance the full gcTime of ExampleDataService
     jest.advanceTimersByTime(inMilliseconds(1, Duration.Day));
 
     const queryData = clientA.getQueryData(getAssetsQueryKey);
@@ -278,7 +278,7 @@ describe('createUIQueryClient', () => {
     jest.useFakeTimers();
 
     const defaultOptions = {
-      queries: { cacheTime: inMilliseconds(5, Duration.Minute) },
+      queries: { gcTime: inMilliseconds(5, Duration.Minute) },
     };
 
     const { clientA, clientB, service } = createClients({ defaultOptions });
@@ -341,12 +341,14 @@ describe('createUIQueryClient', () => {
 
     const observerA = new InfiniteQueryObserver(clientA, {
       queryKey: getActivityQueryKey,
+      initialPageParam: undefined,
       getNextPageParam,
       getPreviousPageParam,
     });
 
     const observerB = new InfiniteQueryObserver(clientB, {
       queryKey: getActivityQueryKey,
+      initialPageParam: undefined,
       getNextPageParam,
       getPreviousPageParam,
     });
@@ -401,7 +403,7 @@ describe('createUIQueryClient', () => {
     const promise = new Promise<Error>((_resolve, reject) => {
       observer.subscribe((event) => {
         if (event.status === 'error') {
-          reject(event.error as Error);
+          reject(event.error);
         }
       });
     });

packages/react-data-query/src/createUIQueryClient.ts

@@ -5,8 +5,6 @@ import {
   QueryClient,
   InvalidateQueryFilters,
   InvalidateOptions,
-  OmitKeyof,
-  parseFilterArgs,
   QueryKey,
   QueryClientConfig,
 } from '@tanstack/query-core';
@@ -80,7 +78,7 @@ export function createUIQueryClient(
           return await messenger.call(
             action,
             ...(options.queryKey.slice(1) as Json[]),
-            options.pageParam,
+            options.pageParam as Json,
           );
         },
       },
@@ -141,14 +139,10 @@ export function createUIQueryClient(
   // Override invalidateQueries to ensure the data service is invalidated as well.
   const originalInvalidate = client.invalidateQueries.bind(client);
 
-  // This function is defined in this way to have full support for all function overloads.
   client.invalidateQueries = async (
-    arg1?: QueryKey | InvalidateQueryFilters,
-    arg2?: OmitKeyof<InvalidateQueryFilters, 'queryKey'> | InvalidateOptions,
-    arg3?: InvalidateOptions,
+    filters?: InvalidateQueryFilters,
+    options?: InvalidateOptions,
   ): Promise<void> => {
-    const [filters, options] = parseFilterArgs(arg1, arg2, arg3);
-
     const queries = client.getQueryCache().findAll(filters);
 
     const services = [

packages/react-data-query/src/hooks.test.ts

@@ -24,7 +24,11 @@ describe('useQuery', () => {
 
 describe('useInfiniteQuery', () => {
   it('calls the underlying TanStack query function', () => {
-    const options = { queryKey: ['foo'] };
+    const options = {
+      queryKey: ['foo'],
+      initialPageParam: undefined,
+      getNextPageParam: (): undefined => undefined,
+    };
     expect(() => useInfiniteQuery(options)).not.toThrow();
     expect(useInfiniteQueryTanStack).toHaveBeenCalledWith({
       staleTime: 0,

packages/react-data-query/src/hooks.ts

@@ -2,6 +2,7 @@ import { QueryKey } from '@metamask/base-data-service';
 import {
   useQuery as useQueryTanStack,
   useInfiniteQuery as useInfiniteQueryTanStack,
+  InfiniteData,
   OmitKeyof,
   UseQueryOptions,
   InitialDataFunction,
@@ -57,17 +58,12 @@ export function useQuery<
 export function useInfiniteQuery<
   TQueryFnData = unknown,
   TError = unknown,
-  TData = TQueryFnData,
+  TData = InfiniteData<TQueryFnData>,
   TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
 >(
   options: OmitKeyof<
-    UseInfiniteQueryOptions<
-      TQueryFnData,
-      TError,
-      TData,
-      TQueryFnData,
-      TQueryKey
-    >,
+    UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>,
     'staleTime' | 'queryFn'
   >,
 ): UseInfiniteQueryResult<TData, TError> {

yarn.lock

@@ -8431,8 +8431,8 @@ __metadata:
     "@metamask/base-data-service": "npm:^0.1.3"
     "@metamask/messenger": "npm:^2.0.0"
     "@metamask/utils": "npm:^11.11.0"
-    "@tanstack/query-core": "npm:^4.43.0"
-    "@tanstack/react-query": "npm:^4.43.0"
+    "@tanstack/query-core": "npm:^5.62.16"
+    "@tanstack/react-query": "npm:^5.62.16"
     "@ts-bridge/cli": "npm:^0.6.4"
     "@types/jest": "npm:^30.0.0"
     deepmerge: "npm:^4.2.2"
@@ -11028,36 +11028,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/query-core@npm:4.43.0, @tanstack/query-core@npm:^4.43.0":
-  version: 4.43.0
-  resolution: "@tanstack/query-core@npm:4.43.0"
-  checksum: 10/c2a5a151c7adaea8311e01a643255f31946ae3164a71567ba80048242821ae14043f13f5516b695baebe5ea7e4b2cf717fd60908a929d18a5c5125fee925ff67
+"@tanstack/query-core@npm:5.101.2, @tanstack/query-core@npm:^5.62.16":
+  version: 5.101.2
+  resolution: "@tanstack/query-core@npm:5.101.2"
+  checksum: 10/567af5e3c21628745a08c1a5054d838597bc620dcbbeabe20cdd6ccffdcca85a8d38128f6e80829b6e04d10f79ca793a7dd8fddc8a3d6bef10c2d580ae214c7d
   languageName: node
   linkType: hard
 
-"@tanstack/query-core@npm:^5.62.16":
-  version: 5.90.20
-  resolution: "@tanstack/query-core@npm:5.90.20"
-  checksum: 10/25e38f4382442bc15e0f6cce8d787e9df8d8822c61d3f3e9427e89e01b1e2506f848292e086dae29aeb55f8ce71b097c34221f3c5eda37fb4a688b5ceca5d1b3
+"@tanstack/query-core@npm:^4.43.0":
+  version: 4.43.0
+  resolution: "@tanstack/query-core@npm:4.43.0"
+  checksum: 10/c2a5a151c7adaea8311e01a643255f31946ae3164a71567ba80048242821ae14043f13f5516b695baebe5ea7e4b2cf717fd60908a929d18a5c5125fee925ff67
   languageName: node
   linkType: hard
 
-"@tanstack/react-query@npm:^4.43.0":
-  version: 4.43.0
-  resolution: "@tanstack/react-query@npm:4.43.0"
+"@tanstack/react-query@npm:^5.62.16":
+  version: 5.101.2
+  resolution: "@tanstack/react-query@npm:5.101.2"
   dependencies:
-    "@tanstack/query-core": "npm:4.43.0"
-    use-sync-external-store: "npm:^1.6.0"
+    "@tanstack/query-core": "npm:5.101.2"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    react-native: "*"
-  peerDependenciesMeta:
-    react-dom:
-      optional: true
-    react-native:
-      optional: true
-  checksum: 10/23f9d18d130fa2a1238d8fba8bc914c67e33753b7fc3a3c7856354a9873c4cbc5d18ce24dbf6364ecf86b8ea787575e1e60998ea75baa2b9e9647ad4b9127e10
+    react: ^18 || ^19
+  checksum: 10/0837c176b6afb01e3632010bbd8bdfeee7f46c4a25a50ed2ba9ddddce11c34431161d80dd8e53a2f55190c2313bbfb22a84a77308e6ccf29877b4818de68c4b3
   languageName: node
   linkType: hard
 
@@ -25504,15 +25496,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "use-sync-external-store@npm:1.6.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10/b40ad2847ba220695bff2d4ba4f4d60391c0fb4fb012faa7a4c18eb38b69181936f5edc55a522c4d20a788d1a879b73c3810952c9d0fd128d01cb3f22042c09e
-  languageName: node
-  linkType: hard
-
 "utf8@npm:^3.0.0":
   version: 3.0.0
   resolution: "utf8@npm:3.0.0"