From aa2afb5dbf3caaa5ca90767da6477679bb4a0ead Mon Sep 17 00:00:00 2001 From: Josh Dowdle Date: Mon, 12 Feb 2024 12:09:09 -0700 Subject: [PATCH] feat!: upgrade to use @tanstack/react-query@v5 --- README.md | 8 +- UPGRADING.md | 56 + package.json | 4 +- src/combination.ts | 14 +- src/hooks.test.tsx | 125 +- src/hooks.ts | 45 +- src/types.ts | 53 +- src/util.test.ts | 1 + yarn.lock | 3437 +++++++++++++++++++++++--------------------- 9 files changed, 1973 insertions(+), 1770 deletions(-) create mode 100644 UPGRADING.md diff --git a/README.md b/README.md index d8e3ff3..468a55d 100644 --- a/README.md +++ b/README.md @@ -210,7 +210,7 @@ const query = useQuery('GET /messages', { filter: 'some-filter' }); query.data; // Message[] | undefined -if (query.isLoading) { +if (query.isPending) { return null; } if (query.isError) { @@ -315,7 +315,7 @@ if (query.isError) { } // This means _at least one_ query is in the "loading" state. -if (query.isLoading) { +if (query.isPending) { return; } @@ -337,9 +337,9 @@ Indicates whether _at least one_ query is in the "fetching" state. Indicates whether _at least one_ query is in the "refetching" state. -#### `isLoading` +#### `isPending` -Indicates whether _at least one_ query is in the "loading state. +Indicates whether _at least one_ query is in the "pending state. #### `isError` diff --git a/UPGRADING.md b/UPGRADING.md new file mode 100644 index 0000000..6431b0f --- /dev/null +++ b/UPGRADING.md @@ -0,0 +1,56 @@ +This document provides instructions for upgrading between major +versions of `@lifeomic/one-query` + +### 3.x -> 4.x + +- Replace your installation of `@tanstack/react-query@4.x` with `@tanstack/react-query@5.x` + +- See `react-query`'s [migration guide](https://tanstack.com/query/v5/docs/framework/react/guides/migrating-to-v5) for an idea. The largest changes will be outlined below - however since `one-query` is mostly a typed wrapper around `react-query` most, if not all, things mentioned apply + +- The `loading` status has been renamed to `pending`, and similarly the derived `isLoading` flag has been renamed to `isPending` + +```diff +- query.status === 'loading' ++ query.status === 'pending' + +- if (query.isLoading) ++ if (query.isPending) +``` + +- `useInfiniteAPIQuery` now requires `initialPageParam` and `getNextPageParam` options. Passing page param through `fetchNextPage` and `fetchPreviousPage` is no longer supported. + +```diff +- const query = useInfiniteAPIQuery('GET /list', { +- filter: 'some-filter', +- after: undefined, +- }); +- await void query.fetchNextPage({ pageParam: {...} }); ++ const query = useInfiniteAPIQuery( ++ 'GET /list', ++ { ++ filter: 'some-filter', ++ after: undefined, ++ }, ++ { ++ initialPageParam: {}, ++ getNextPageParam: (lastPage) => ({ ++ after: lastPage.next, ++ }), ++ }, ++ ); ++ await void query.fetchNextPage(); +``` + +- The minimum required TypeScript version is now 4.7 + +- TypeScript: `Error` is now the default type for errors instead of `unknown` + +- Callbacks on `useQuery` have been removed (e.g., `onSuccess`, `onError` and `onSettled`) + +- Removed `keepPreviousData` in favor of `placeholderData` identity function + +- Rename `cacheTime` to `gcTime` + +- Removed `refetchPage` in favor of `maxPages` + +- The experimental `suspense: boolean` flag on the query hooks has been removed - new hooks for suspense have been added diff --git a/package.json b/package.json index 1f5e315..1943e30 100644 --- a/package.json +++ b/package.json @@ -15,13 +15,13 @@ "build": "node build.js" }, "peerDependencies": { - "@tanstack/react-query": "*", + "@tanstack/react-query": ">=5.0.0", "axios": "*" }, "devDependencies": { "@lifeomic/eslint-config-standards": "^3.0.1", "@lifeomic/typescript-config": "^2.0.0", - "@tanstack/react-query": "^4.12.0", + "@tanstack/react-query": "^5.20.1", "@testing-library/react": "^13.4.0", "@types/jest": "^29.2.0", "@types/lodash": "^4.14.186", diff --git a/src/combination.ts b/src/combination.ts index 5491ad2..3eb12a2 100644 --- a/src/combination.ts +++ b/src/combination.ts @@ -18,7 +18,7 @@ export type CombinedQueriesDefinedResult< Queries extends QueryObserverResult[], > = { status: 'success'; - isLoading: false; + isPending: false; isError: false; data: { [Index in keyof Queries]: DataOfQuery; @@ -34,7 +34,7 @@ export type CombinedQueriesLoadingResult< Queries extends QueryObserverResult[], > = { status: 'loading'; - isLoading: true; + isPending: true; isError: false; data: undefined; queries: Queries; @@ -43,7 +43,7 @@ export type CombinedQueriesLoadingResult< export type CombinedQueriesErrorResult = { status: 'error'; - isLoading: false; + isPending: false; isError: true; data: undefined; queries: Queries; @@ -74,18 +74,18 @@ export const combineQueries = ( return { ...base, status: 'error', - isLoading: false, + isPending: false, data: undefined, isError: true, queries, }; } - if (queries.some((query) => query.status === 'loading')) { + if (queries.some((query) => query.status === 'pending')) { return { ...base, status: 'loading', - isLoading: true, + isPending: true, data: undefined, isError: false, queries, @@ -95,7 +95,7 @@ export const combineQueries = ( return { ...base, status: 'success', - isLoading: false, + isPending: false, data: queries.map((query) => query.data) as any, isError: false, queries: queries as any, diff --git a/src/hooks.test.tsx b/src/hooks.test.tsx index 9508b6d..6041430 100644 --- a/src/hooks.test.tsx +++ b/src/hooks.test.tsx @@ -201,34 +201,35 @@ describe('useInfiniteAPIQuery', () => { network.mock('GET /list', listSpy); render(() => { - const query = useInfiniteAPIQuery('GET /list', { - filter: 'some-filter', - after: undefined, - }); + const query = useInfiniteAPIQuery( + 'GET /list', + { + filter: 'some-filter', + after: undefined, + }, + { + initialPageParam: {}, + getNextPageParam: (lastPage) => ({ + after: lastPage.next, + }), + getPreviousPageParam: (firstPage) => ({ + before: firstPage.previous, + }), + }, + ); return (