diff --git a/packages/react-data-query/CHANGELOG.md b/packages/react-data-query/CHANGELOG.md index 40652dac5da..68a77976c13 100644 --- a/packages/react-data-query/CHANGELOG.md +++ b/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 diff --git a/packages/react-data-query/package.json b/packages/react-data-query/package.json index 8c8d5404908..2f33808bf4c 100644 --- a/packages/react-data-query/package.json +++ b/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", diff --git a/packages/react-data-query/src/createUIQueryClient.test.ts b/packages/react-data-query/src/createUIQueryClient.test.ts index f3d9bf24a63..d4fd26c549e 100644 --- a/packages/react-data-query/src/createUIQueryClient.test.ts +++ b/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((_resolve, reject) => { observer.subscribe((event) => { if (event.status === 'error') { - reject(event.error as Error); + reject(event.error); } }); }); diff --git a/packages/react-data-query/src/createUIQueryClient.ts b/packages/react-data-query/src/createUIQueryClient.ts index 784eddc35a7..9a84e9ad4dd 100644 --- a/packages/react-data-query/src/createUIQueryClient.ts +++ b/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 | InvalidateOptions, - arg3?: InvalidateOptions, + filters?: InvalidateQueryFilters, + options?: InvalidateOptions, ): Promise => { - const [filters, options] = parseFilterArgs(arg1, arg2, arg3); - const queries = client.getQueryCache().findAll(filters); const services = [ diff --git a/packages/react-data-query/src/hooks.test.ts b/packages/react-data-query/src/hooks.test.ts index 0d1733bac4d..79ed27fbfcf 100644 --- a/packages/react-data-query/src/hooks.test.ts +++ b/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, diff --git a/packages/react-data-query/src/hooks.ts b/packages/react-data-query/src/hooks.ts index 42d8478bec1..972b50806c7 100644 --- a/packages/react-data-query/src/hooks.ts +++ b/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, TQueryKey extends QueryKey = QueryKey, + TPageParam = unknown, >( options: OmitKeyof< - UseInfiniteQueryOptions< - TQueryFnData, - TError, - TData, - TQueryFnData, - TQueryKey - >, + UseInfiniteQueryOptions, 'staleTime' | 'queryFn' >, ): UseInfiniteQueryResult { diff --git a/yarn.lock b/yarn.lock index f7669c81b54..97d8dc6c6d9 100644 --- a/yarn.lock +++ b/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"