Skip to content

Commit 35539bf

Browse files
committed
Merge branch 'main' into beta
# Conflicts: # docs/config.json # docs/react/guides/queries.md # docs/react/typescript.md # docs/vue/typescript.md # examples/vue/dependent-queries/src/Post.vue # package.json # packages/eslint-plugin-query/package.json # packages/query-async-storage-persister/package.json # packages/query-broadcast-client-experimental/package.json # packages/query-core/package.json # packages/query-core/src/index.ts # packages/query-core/src/query.ts # packages/query-core/src/types.ts # packages/query-persist-client-core/package.json # packages/query-sync-storage-persister/package.json # packages/react-query-devtools/package.json # packages/react-query-persist-client/package.json # packages/react-query/package.json # packages/solid-query/package.json # packages/svelte-query/package.json # packages/vue-query/package.json # packages/vue-query/src/__tests__/useQuery.test.ts # packages/vue-query/src/types.ts # packages/vue-query/src/useBaseQuery.ts # packages/vue-query/src/useInfiniteQuery.ts # packages/vue-query/src/useIsFetching.ts # packages/vue-query/src/useIsMutating.ts # packages/vue-query/src/useMutation.ts # packages/vue-query/src/useQueries.ts # packages/vue-query/src/useQuery.ts # packages/vue-query/src/useQueryClient.ts # pnpm-lock.yaml # scripts/config.ts
2 parents abd93c2 + 3d64084 commit 35539bf

File tree

7 files changed

+95
-8
lines changed

7 files changed

+95
-8
lines changed

Diff for: docs/react/guides/dependent-queries.md

+33
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: dependent-queries
33
title: Dependent Queries
44
---
55

6+
## useQuery dependent Query
7+
68
Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the `enabled` option to tell a query when it is ready to run:
79

810
[//]: # 'Example'
@@ -54,3 +56,34 @@ status: 'success'
5456
isPending: false
5557
fetchStatus: 'idle'
5658
```
59+
60+
## useQueries dependent Query
61+
62+
Dynamic parallel query - `useQueries` can depend on a previous query also, here's how to achieve this:
63+
64+
[//]: # 'Example2'
65+
66+
```tsx
67+
// Get the users ids
68+
const { data: userIds } = useQuery({
69+
queryKey: ['users'],
70+
queryFn: getUsersData,
71+
select: users => users.map(user => user.id),
72+
})
73+
74+
// Then get the users messages
75+
const usersMessages = useQueries({
76+
queries: users
77+
? usersId.map(id => {
78+
return {
79+
queryKey: ['messages', id],
80+
queryFn: () => getMessagesByUsers(id),
81+
};
82+
})
83+
: [], // if users is undefined, an empty array will be returned
84+
})
85+
```
86+
87+
[//]: # 'Example2'
88+
89+
**Note** that `useQueries` return an **array of query results**

Diff for: docs/react/plugins/persistQueryClient.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ import { PersistedClient, Persister } from "@tanstack/react-query-persist-client
265265
export function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
266266
return {
267267
persistClient: async (client: PersistedClient) => {
268-
set(idbValidKey, client);
268+
await set(idbValidKey, client);
269269
},
270270
restoreClient: async () => {
271271
return await get<PersistedClient>(idbValidKey);

Diff for: docs/react/typescript.md

+2
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ The type for error defaults to `Error`, because that is what most users expect.
8888

8989
[//]: # 'TypingError'
9090

91+
[//]: # 'TypingError'
92+
9193
```tsx
9294
const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
9395
// ^? const error: Error

Diff for: packages/query-core/src/query.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -570,7 +570,7 @@ export class Query<
570570
const error = action.error as unknown
571571

572572
if (isCancelledError(error) && error.revert && this.#revertState) {
573-
return { ...this.#revertState }
573+
return { ...this.#revertState, fetchStatus: 'idle' }
574574
}
575575

576576
return {

Diff for: packages/query-core/src/tests/query.test.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -864,4 +864,56 @@ describe('query', () => {
864864

865865
unsubscribe()
866866
})
867+
868+
test('should always revert to idle state (#5958)', async () => {
869+
let mockedData = [1]
870+
871+
const key = queryKey()
872+
873+
const queryFn = jest.fn<
874+
Promise<unknown>,
875+
[QueryFunctionContext<ReturnType<typeof queryKey>>]
876+
>()
877+
878+
queryFn.mockImplementation(({ signal }) => {
879+
return new Promise((resolve, reject) => {
880+
const abortListener = () => {
881+
clearTimeout(timerId)
882+
reject(signal!.reason)
883+
}
884+
signal!.addEventListener('abort', abortListener)
885+
886+
const timerId = setTimeout(() => {
887+
signal!.removeEventListener('abort', abortListener)
888+
resolve(mockedData.join(' - '))
889+
}, 50)
890+
})
891+
})
892+
893+
const observer = new QueryObserver(queryClient, {
894+
queryKey: key,
895+
queryFn,
896+
})
897+
const unsubscribe = observer.subscribe(() => undefined)
898+
await sleep(60) // let it resolve
899+
900+
mockedData = [1, 2] // update "server" state in the background
901+
902+
queryClient.invalidateQueries(key)
903+
await sleep(1)
904+
queryClient.invalidateQueries(key)
905+
await sleep(1)
906+
unsubscribe() // unsubscribe to simulate unmount
907+
908+
// set up a new observer to simulate a mount of new component
909+
const newObserver = new QueryObserver(queryClient, {
910+
queryKey: key,
911+
queryFn,
912+
})
913+
914+
const spy = jest.fn()
915+
newObserver.subscribe(({ data }) => spy(data))
916+
await sleep(60) // let it resolve
917+
expect(spy).toHaveBeenCalledWith('1 - 2')
918+
})
867919
})

Diff for: packages/vue-query/src/__tests__/useQueryClient.test.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ describe('useQueryClient', () => {
2020

2121
expect(queryClient).toStrictEqual(queryClientMock)
2222
expect(injectSpy).toHaveBeenCalledTimes(1)
23-
expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT)
23+
expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT, null)
2424
})
2525

2626
test('should throw an error when queryClient does not exist in the context', () => {
2727
injectSpy.mockReturnValueOnce(undefined)
2828

2929
expect(useQueryClient).toThrowError()
3030
expect(injectSpy).toHaveBeenCalledTimes(1)
31-
expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT)
31+
expect(injectSpy).toHaveBeenCalledWith(VUE_QUERY_CLIENT, null)
3232
})
3333

3434
test('should throw an error when used outside of setup function', () => {
@@ -46,6 +46,6 @@ describe('useQueryClient', () => {
4646

4747
useQueryClient(queryClientKey)
4848

49-
expect(injectSpy).toHaveBeenCalledWith(expectedKeyParameter)
49+
expect(injectSpy).toHaveBeenCalledWith(expectedKeyParameter, null)
5050
})
5151
})

Diff for: pnpm-lock.yaml

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)