You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<imgalt="Join the discussion on Github"src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
21
-
</a><ahref="https://bestofjs.org/projects/react-query"><imgalt="Best of JS"src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Fquery%26since=daily" /></a><ahref="https://github.com/tannerlinsley/react-query"target="\_parent">
21
+
</a><ahref="https://bestofjs.org/projects/tanstack-query"><imgalt="Best of JS"src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Fquery%26since=daily" /></a><ahref="https://github.com/tannerlinsley/react-query"target="\_parent">
> ⚠️ This module has not yet been developed. It requires an adapter similar to `react-query` to work. We estimate the amount of code to do this is low-to-moderate, but does require familiarity with the Vue framework. If you would like to contribute this adapter, please open a PR!
6
6
7
-
The `@tanstack/vue-query` package offers a 1st-class API for using TanStack Query via Solid. However, all of the primitives you receive from this API are core APIs that are shared across all of the TanStack Adapters including the Query Client, query results, query subscriptions, etc.
7
+
The `@tanstack/vue-query` package offers a 1st-class API for using TanStack Query via Vue. However, all of the primitives you receive from this API are core APIs that are shared across all of the TanStack Adapters including the Query Client, query results, query subscriptions, etc.
Copy file name to clipboardExpand all lines: docs/guides/important-defaults.md
+1-2Lines changed: 1 addition & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,12 +30,11 @@ If you see a refetch that you are not expecting, it is likely because you just f
30
30
31
31
- Query results by default are **structurally shared to detect if data has actually changed** and if not, **the data reference remains unchanged** to better help with value stabilization with regards to useMemo and useCallback. If this concept sounds foreign, then don't worry about it! 99.9% of the time you will not need to disable this and it makes your app more performant at zero cost to you.
32
32
33
-
> Structural sharing only works with JSON-compatible values, any other value types will always be considered as changed. If you are seeing performance issues because of large responses for example, you can disable this feature with the `config.structuralSharing` flag. If you are dealing with non-JSON compatible values in your query responses and still want to detect if data has changed or not, you can define a data compare function with `config.isDataEqual`.
33
+
> Structural sharing only works with JSON-compatible values, any other value types will always be considered as changed. If you are seeing performance issues because of large responses for example, you can disable this feature with the `config.structuralSharing` flag. If you are dealing with non-JSON compatible values in your query responses and still want to detect if data has changed or not, you can define a data compare function with `config.isDataEqual` or provide your own custom function as `config.structuralSharing` to compute a value from the old and new responses, retaining references as required.
34
34
35
35
## Further Reading
36
36
37
37
Have a look at the following articles from our Community Resources for further explanations of the defaults:
You can also pass this function as part of the 2nd argument (`queryFilters`) to [queryClient.refetchQueries](/reference/QueryClient#queryclientrefetchqueries), [queryClient.invalidateQueries](/reference/QueryClient#queryclientinvalidatequeries) or [queryClient.resetQueries](/reference/QueryClient#queryclientresetqueries).
111
+
You can also pass this function as part of the 2nd argument (`queryFilters`) to [queryClient.refetchQueries](../reference/QueryClient#queryclientrefetchqueries), [queryClient.invalidateQueries](../reference/QueryClient#queryclientinvalidatequeries) or [queryClient.resetQueries](../reference/QueryClient#queryclientresetqueries).
### `persistQueryClient` and the corresponding persister plugins are no longer experimental and have been renamed
254
254
255
-
The plugins `createWebStoragePersistor` and `createAsyncStoragePersistor` have been renamed to [`createSyncStoragePersister`](/plugins/createSyncStoragePersister) and [`createAsyncStoragePersister`](/plugins/createAsyncStoragePersister) respectively. The interface `Persistor` in `persistQueryClient` has also been renamed to `Persister`. Checkout [this stackexchange](https://english.stackexchange.com/questions/206893/persister-or-persistor) for the motivation of this change.
255
+
The plugins `createWebStoragePersistor` and `createAsyncStoragePersistor` have been renamed to [`createSyncStoragePersister`](../plugins/createSyncStoragePersister) and [`createAsyncStoragePersister`](../plugins/createAsyncStoragePersister) respectively. The interface `Persistor` in `persistQueryClient` has also been renamed to `Persister`. Checkout [this stackexchange](https://english.stackexchange.com/questions/206893/persister-or-persistor) for the motivation of this change.
256
256
257
257
Since these plugins are no longer experimental, their import paths have also been updated:
Copy file name to clipboardExpand all lines: docs/guides/testing.md
+27-11Lines changed: 27 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ title: Testing
5
5
6
6
React Query works by means of hooks - either the ones we offer or custom ones that wrap around them.
7
7
8
-
Writing unit tests for these custom hooks can be done by means of the [React Hooks Testing Library](https://react-hooks-testing-library.com/) library.
8
+
With React 17 or earlier, writing unit tests for these custom hooks can be done by means of the [React Hooks Testing Library](https://react-hooks-testing-library.com/) library.
(The `react-test-renderer` library is needed as a peer dependency of `@testing-library/react-hooks`, and needs to correspond to the version of React that you are using.)
17
17
18
+
*Note*: when using React 18 or later, `renderHook` is available directly through the `@testing-library/react` package, and `@testing-library/react-hooks` is no longer required.
19
+
18
20
## Our First Test
19
21
20
22
Once installed, a simple test can be written. Given the following custom hook:
21
23
22
-
```
24
+
```ts
23
25
exportfunction useCustomHook() {
24
26
returnuseQuery(['customHook'], () =>'Hello');
25
27
}
26
28
```
27
29
28
-
We can write a test for this as follows:
30
+
Using React 17 or earlier, we can write a test for this as follows:
Note that we provide a custom wrapper that builds the `QueryClient` and `QueryClientProvider`. This helps to ensure that our test is completely isolated from any other tests.
46
60
47
61
It is possible to write this wrapper only once, but if so we need to ensure that the `QueryClient` gets cleared before every test, and that tests don't run in parallel otherwise one test will influence the results of others.
@@ -50,7 +64,7 @@ It is possible to write this wrapper only once, but if so we need to ensure that
50
64
51
65
The library defaults to three retries with exponential backoff, which means that your tests are likely to timeout if you want to test an erroneous query. The easiest way to turn retries off is via the QueryClientProvider. Let's extend the above example:
52
66
53
-
```
67
+
```tsx
54
68
const queryClient =newQueryClient({
55
69
defaultOptions: {
56
70
queries: {
@@ -98,15 +112,15 @@ There are plenty of ways that these can be tested, but for this example we are g
Here we are making use of `waitFor` and waiting until the query status indicates that the request has succeeded. This way we know that our hook has finished and should have the correct data.
146
+
Here we are making use of `waitFor` and waiting until the query status indicates that the request has succeeded. This way we know that our hook has finished and should have the correct data.*Note*: when using React 18, the semantics of `waitFor` have changed as noted above.
133
147
134
148
## Testing Load More / Infinite Scroll
135
149
136
150
First we need to mock our API response
137
151
138
-
```
152
+
```ts
139
153
function generateMockedResponse(page) {
140
154
return {
141
155
page: page,
@@ -147,7 +161,7 @@ function generateMockedResponse(page) {
147
161
Then, our `nock` configuration needs to differentiate responses based on the page, and we'll be using `uri` to do this.
148
162
`uri`'s value here will be something like `"/?page=1` or `/?page=2`
*Note*: when using React 18, the semantics of `waitFor` have changed as noted above.
201
+
186
202
## Further reading
187
203
188
204
For additional tips and an alternative setup using `mock-service-worker`, have a look at [Testing React Query](../community/tkdodos-blog#5-testing-react-query) from
0 commit comments