Skip to content

Commit

Permalink
feat!: upgrade to use @tanstack/react-query@v5
Browse files Browse the repository at this point in the history
  • Loading branch information
jkdowdle committed Feb 12, 2024
1 parent 38b46fd commit aa2afb5
Show file tree
Hide file tree
Showing 9 changed files with 1,973 additions and 1,770 deletions.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
}

Expand All @@ -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`
Expand Down
56 changes: 56 additions & 0 deletions UPGRADING.md
Original file line number Diff line number Diff line change
@@ -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/[email protected]` with `@tanstack/[email protected]`

- 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
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 7 additions & 7 deletions src/combination.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export type CombinedQueriesDefinedResult<
Queries extends QueryObserverResult[],
> = {
status: 'success';
isLoading: false;
isPending: false;
isError: false;
data: {
[Index in keyof Queries]: DataOfQuery<Queries[Index]>;
Expand All @@ -34,7 +34,7 @@ export type CombinedQueriesLoadingResult<
Queries extends QueryObserverResult[],
> = {
status: 'loading';
isLoading: true;
isPending: true;
isError: false;
data: undefined;
queries: Queries;
Expand All @@ -43,7 +43,7 @@ export type CombinedQueriesLoadingResult<
export type CombinedQueriesErrorResult<Queries extends QueryObserverResult[]> =
{
status: 'error';
isLoading: false;
isPending: false;
isError: true;
data: undefined;
queries: Queries;
Expand Down Expand Up @@ -74,18 +74,18 @@ export const combineQueries = <Queries extends QueryObserverResult[]>(
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,
Expand All @@ -95,7 +95,7 @@ export const combineQueries = <Queries extends QueryObserverResult[]>(
return {
...base,
status: 'success',
isLoading: false,
isPending: false,
data: queries.map((query) => query.data) as any,
isError: false,
queries: queries as any,
Expand Down
Loading

0 comments on commit aa2afb5

Please sign in to comment.