Skip to content

Commit

Permalink
Merge branch 'main' into types/query-core/OmitKeyof
Browse files Browse the repository at this point in the history
  • Loading branch information
manudeli committed Apr 25, 2024
2 parents 8286d24 + 2aca521 commit b44c924
Show file tree
Hide file tree
Showing 147 changed files with 1,065 additions and 678 deletions.
2 changes: 1 addition & 1 deletion docs/framework/angular/guides/caching.md
Expand Up @@ -23,7 +23,7 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default
- A second instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })` initializes elsewhere.
- Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
- The new instance triggers a new network request using its query function.
- Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../injectQuery) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
- Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../../reference/injectQuery) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
- When the request completes successfully, the cache's data under the `['todos']` key is updated with the new data, and both instances are updated with the new data.
- Both instances of the `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })` query are destroyed and no longer in use.
- Since there are no more active instances of this query, a garbage collection timeout is set using `gcTime` to delete and garbage collect the query (defaults to **5 minutes**).
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/angular/overview.md
Expand Up @@ -114,4 +114,4 @@ type Response = {
## You talked me into it, so what now?
- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](./installation) and [API Reference](../injectQuery)
- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/injectQuery)
2 changes: 1 addition & 1 deletion docs/framework/react/guides/advanced-ssr.md
Expand Up @@ -421,7 +421,7 @@ export function Providers(props: { children: React.ReactNode }) {
}
```

For more information, check out the [NextJs Suspense Streaming Example](../examples/nextjs-suspense-streaming).
For more information, check out the [NextJs Suspense Streaming Example](../../examples/nextjs-suspense-streaming).

The big upside is that you no longer need to prefetch queries manually to have SSR work, and it even still streams in the result! This gives you phenomenal DX and lower code complexity.

Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guides/caching.md
Expand Up @@ -23,7 +23,7 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default
- A second instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts elsewhere.
- Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
- The new instance triggers a new network request using its query function.
- Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../useQuery) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
- Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../../reference/useQuery) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
- When the request completes successfully, the cache's data under the `['todos']` key is updated with the new data, and both instances are updated with the new data.
- Both instances of the `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` query are unmounted and no longer in use.
- Since there are no more active instances of this query, a garbage collection timeout is set using `gcTime` to delete and garbage collect the query (defaults to **5 minutes**).
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guides/dependent-queries.md
Expand Up @@ -90,6 +90,6 @@ const usersMessages = useQueries({

## A note about performance

Dependent queries by definition constitutes a form of [request waterfall](../request-waterfalls), which hurts performance. If we pretend both queries take the same amount of time, doing them serially instead of in parallel always takes twice as much time, which is especially hurtful when it happens on a client that has high latency. If you can, it's always better to restructure the backend APIs so that both queries can be fetched in parallel, though that might not always be practically feasible.
Dependent queries by definition constitutes a form of [request waterfall](../../../react/guides/request-waterfalls), which hurts performance. If we pretend both queries take the same amount of time, doing them serially instead of in parallel always takes twice as much time, which is especially hurtful when it happens on a client that has high latency. If you can, it's always better to restructure the backend APIs so that both queries can be fetched in parallel, though that might not always be practically feasible.

In the example above, instead of first fetching `getUserByEmail` to be able to `getProjectsByUser`, introducing a new `getProjectsByUserEmail` query would flatten the waterfall.
4 changes: 2 additions & 2 deletions docs/framework/react/guides/important-defaults.md
Expand Up @@ -36,7 +36,7 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul

Have a look at the following articles from our Community Resources for further explanations of the defaults:

- [Practical React Query](../tkdodos-blog#1-practical-react-query)
- [React Query as a State Manager](../tkdodos-blog#10-react-query-as-a-state-manager)
- [Practical React Query](../../community/tkdodos-blog#1-practical-react-query)
- [React Query as a State Manager](../../community/tkdodos-blog#10-react-query-as-a-state-manager)

[//]: # 'Materials'
6 changes: 3 additions & 3 deletions docs/framework/react/guides/initial-query-data.md
Expand Up @@ -8,8 +8,8 @@ There are many ways to supply initial data for a query to the cache before you n
- Declaratively:
- Provide `initialData` to a query to prepopulate its cache if empty
- Imperatively:
- [Prefetch the data using `queryClient.prefetchQuery`](../prefetching)
- [Manually place the data into the cache using `queryClient.setQueryData`](../prefetching)
- [Prefetch the data using `queryClient.prefetchQuery`](../../../react/guides/prefetching)
- [Manually place the data into the cache using `queryClient.setQueryData`](../../../react/guides/prefetching)

## Using `initialData` to prepopulate a query

Expand Down Expand Up @@ -170,6 +170,6 @@ const result = useQuery({

## Further reading

For a comparison between `Initial Data` and `Placeholder Data`, have a look at the [Community Resources](../tkdodos-blog#9-placeholder-and-initial-data-in-react-query).
For a comparison between `Initial Data` and `Placeholder Data`, have a look at the [Community Resources](../../community/tkdodos-blog#9-placeholder-and-initial-data-in-react-query).

[//]: # 'Materials'
18 changes: 9 additions & 9 deletions docs/framework/react/guides/migrating-to-react-query-3.md
Expand Up @@ -103,8 +103,8 @@ try {

Together, these provide the same experience as before, but with added control to choose which component trees you want to reset. For more information, see:

- [QueryErrorResetBoundary](../QueryErrorResetBoundary)
- [useQueryErrorResetBoundary](../useQueryErrorResetBoundary)
- [QueryErrorResetBoundary](../../reference/QueryErrorResetBoundary)
- [useQueryErrorResetBoundary](../../reference/useQueryErrorResetBoundary)

### `QueryCache.getQuery()` has been replaced by `QueryCache.find()`.

Expand Down Expand Up @@ -425,19 +425,19 @@ Therefore you have to change the enum properties to their equivalent string lite

Here is an example of the changes you would have to make:

```diff
- import { useQuery, QueryStatus } from 'react-query';
+ import { useQuery } from 'react-query';
```tsx
- import { useQuery, QueryStatus } from 'react-query'; // [!code --]
+ import { useQuery } from 'react-query'; // [!code ++]

const { data, status } = useQuery(['post', id], () => fetchPost(id))

- if (status === QueryStatus.Loading) {
+ if (status === 'loading') {
- if (status === QueryStatus.Loading) { // [!code --]
+ if (status === 'loading') { // [!code ++]
...
}

- if (status === QueryStatus.Error) {
+ if (status === 'error') {
- if (status === QueryStatus.Error) { // [!code --]
+ if (status === 'error') { // [!code ++]
...
}
```
Expand Down

0 comments on commit b44c924

Please sign in to comment.