Skip to content

Commit 0ddc33f

Browse files
committed
Merge branch 'main' into prefetch-queries-hook
2 parents ad28506 + 57d159c commit 0ddc33f

File tree

346 files changed

+8604
-8836
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

346 files changed

+8604
-8836
lines changed

.github/workflows/pr.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,4 @@ jobs:
7171
|--------|--------|
7272
| Main | [![](https://deno.bundlejs.com/badge?q=https://esm.sh/@tanstack/react-query/es2022/react-query.mjs&config={%22esbuild%22:{%22external%22:[%22react@^19.0.0/jsx-runtime?target=es2022%22,%22react@^19.0.0?target=es2022%22]}}&badge=detailed)](https://bundlejs.com/?q=https://esm.sh/@tanstack/react-query/es2022/react-query.mjs&config=%7B%22esbuild%22:%7B%22external%22:%5B%22react@%5E19.0.0/jsx-runtime?target=es2022%22,%22react@%5E19.0.0?target=es2022%22%5D%7D%7D) |
7373
| This PR | [![](https://deno.bundlejs.com/badge?q=https://esm.sh/pr/@tanstack/react-query@${{ env.COMMIT_SHA }}/es2022/react-query.mjs&config={%22esbuild%22:{%22external%22:[%22react@^19.0.0/jsx-runtime?target=es2022%22,%22react@^19.0.0?target=es2022%22]}}&badge=detailed)](https://bundlejs.com/?q=https://esm.sh/pr/@tanstack/react-query@${{ env.COMMIT_SHA }}/es2022/react-query.mjs&config=%7B%22esbuild%22:%7B%22external%22:%5B%22react@%5E19.0.0/jsx-runtime?target=es2022%22,%22react@%5E19.0.0?target=es2022%22%5D%7D%7D) |
74+
continue-on-error: true

CONTRIBUTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ pnpm i
100100
pnpm dev
101101
```
102102

103-
4. Now you can visit http://localhost:3000/query/latest/docs/overview in the browser and see the changes you make in `tanstack/query/docs` there.
103+
4. Now you can visit http://localhost:3000/query/latest/docs/framework/react/overview in the browser and see the changes you make in `tanstack/query/docs` there.
104104

105105
> [!WARNING]
106106
> You will need to update the `docs/config.json` file (in `TanStack/query`) if you add a new documentation page!

docs/config.json

Lines changed: 209 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,143 @@
326326
}
327327
]
328328
},
329+
{
330+
"label": "solid",
331+
"children": [
332+
{
333+
"label": "Important Defaults",
334+
"to": "framework/solid/guides/important-defaults"
335+
},
336+
{
337+
"label": "Queries",
338+
"to": "framework/solid/guides/queries"
339+
},
340+
{
341+
"label": "Query Keys",
342+
"to": "framework/solid/guides/query-keys"
343+
},
344+
{
345+
"label": "Query Functions",
346+
"to": "framework/solid/guides/query-functions"
347+
},
348+
{
349+
"label": "Query Options",
350+
"to": "framework/solid/guides/query-options"
351+
},
352+
{
353+
"label": "Network Mode",
354+
"to": "framework/solid/guides/network-mode"
355+
},
356+
{
357+
"label": "Parallel Queries",
358+
"to": "framework/solid/guides/parallel-queries"
359+
},
360+
{
361+
"label": "Dependent Queries",
362+
"to": "framework/solid/guides/dependent-queries"
363+
},
364+
{
365+
"label": "Background Fetching Indicators",
366+
"to": "framework/solid/guides/background-fetching-indicators"
367+
},
368+
{
369+
"label": "Window Focus Refetching",
370+
"to": "framework/solid/guides/window-focus-refetching"
371+
},
372+
{
373+
"label": "Disabling/Pausing Queries",
374+
"to": "framework/solid/guides/disabling-queries"
375+
},
376+
{
377+
"label": "Query Retries",
378+
"to": "framework/solid/guides/query-retries"
379+
},
380+
{
381+
"label": "Paginated Queries",
382+
"to": "framework/solid/guides/paginated-queries"
383+
},
384+
{
385+
"label": "Infinite Queries",
386+
"to": "framework/solid/guides/infinite-queries"
387+
},
388+
{
389+
"label": "Initial Query Data",
390+
"to": "framework/solid/guides/initial-query-data"
391+
},
392+
{
393+
"label": "Placeholder Query Data",
394+
"to": "framework/solid/guides/placeholder-query-data"
395+
},
396+
{
397+
"label": "Mutations",
398+
"to": "framework/solid/guides/mutations"
399+
},
400+
{
401+
"label": "Query Invalidation",
402+
"to": "framework/solid/guides/query-invalidation"
403+
},
404+
{
405+
"label": "Invalidation from Mutations",
406+
"to": "framework/solid/guides/invalidations-from-mutations"
407+
},
408+
{
409+
"label": "Updates from Mutation Responses",
410+
"to": "framework/solid/guides/updates-from-mutation-responses"
411+
},
412+
{
413+
"label": "Optimistic Updates",
414+
"to": "framework/solid/guides/optimistic-updates"
415+
},
416+
{
417+
"label": "Query Cancellation",
418+
"to": "framework/solid/guides/query-cancellation"
419+
},
420+
{
421+
"label": "Scroll Restoration",
422+
"to": "framework/solid/guides/scroll-restoration"
423+
},
424+
{
425+
"label": "Filters",
426+
"to": "framework/solid/guides/filters"
427+
},
428+
{
429+
"label": "Request Waterfalls",
430+
"to": "framework/solid/guides/request-waterfalls"
431+
},
432+
{
433+
"label": "Prefetching",
434+
"to": "framework/solid/guides/prefetching"
435+
},
436+
{
437+
"label": "SSR",
438+
"to": "framework/solid/guides/ssr"
439+
},
440+
{
441+
"label": "Advanced SSR",
442+
"to": "framework/solid/guides/advanced-ssr"
443+
},
444+
{
445+
"label": "Caching",
446+
"to": "framework/solid/guides/caching"
447+
},
448+
{
449+
"label": "Default Query Fn",
450+
"to": "framework/solid/guides/default-query-function"
451+
},
452+
{
453+
"label": "Suspense",
454+
"to": "framework/solid/guides/suspense"
455+
},
456+
{
457+
"label": "Testing",
458+
"to": "framework/solid/guides/testing"
459+
},
460+
{
461+
"label": "Does this replace state managers?",
462+
"to": "framework/angular/guides/does-this-replace-client-state"
463+
}
464+
]
465+
},
329466
{
330467
"label": "vue",
331468
"children": [
@@ -605,6 +742,10 @@
605742
"label": "QueriesObserver",
606743
"to": "reference/QueriesObserver"
607744
},
745+
{
746+
"label": "streamedQuery",
747+
"to": "reference/streamedQuery"
748+
},
608749
{
609750
"label": "focusManager",
610751
"to": "reference/focusManager"
@@ -757,8 +898,44 @@
757898
"label": "solid",
758899
"children": [
759900
{
760-
"label": "createQuery",
761-
"to": "framework/solid/reference/createQuery"
901+
"label": "useQuery",
902+
"to": "framework/solid/reference/useQuery"
903+
},
904+
{
905+
"label": "useQueries",
906+
"to": "framework/solid/reference/useQueries"
907+
},
908+
{
909+
"label": "useInfiniteQuery",
910+
"to": "framework/solid/reference/useInfiniteQuery"
911+
},
912+
{
913+
"label": "useMutation",
914+
"to": "framework/solid/reference/useMutation"
915+
},
916+
{
917+
"label": "useIsFetching",
918+
"to": "framework/solid/reference/useIsFetching"
919+
},
920+
{
921+
"label": "useIsMutating",
922+
"to": "framework/solid/reference/useIsMutating"
923+
},
924+
{
925+
"label": "useMutationState",
926+
"to": "framework/solid/reference/useMutationState"
927+
},
928+
{
929+
"label": "queryOptions",
930+
"to": "framework/solid/reference/queryOptions"
931+
},
932+
{
933+
"label": "infiniteQueryOptions",
934+
"to": "framework/solid/reference/infiniteQueryOptions"
935+
},
936+
{
937+
"label": "hydration",
938+
"to": "framework/solid/reference/hydration"
762939
}
763940
]
764941
},
@@ -844,6 +1021,19 @@
8441021
}
8451022
]
8461023
},
1024+
{
1025+
"label": "solid",
1026+
"children": [
1027+
{
1028+
"label": "TkDodo's Blog",
1029+
"to": "framework/solid/community/tkdodos-blog"
1030+
},
1031+
{
1032+
"label": "Community Projects",
1033+
"to": "framework/solid/community/community-projects"
1034+
}
1035+
]
1036+
},
8471037
{
8481038
"label": "vue",
8491039
"children": [
@@ -961,6 +1151,10 @@
9611151
{
9621152
"label": "Devtools Embedded Panel",
9631153
"to": "framework/react/examples/devtools-panel"
1154+
},
1155+
{
1156+
"label": "Chat example (streaming)",
1157+
"to": "framework/react/examples/chat"
9641158
}
9651159
]
9661160
},
@@ -1127,6 +1321,19 @@
11271321
}
11281322
]
11291323
},
1324+
{
1325+
"label": "solid",
1326+
"children": [
1327+
{
1328+
"label": "broadcastQueryClient (Experimental)",
1329+
"to": "framework/solid/plugins/broadcastQueryClient"
1330+
},
1331+
{
1332+
"label": "createPersister (Experimental)",
1333+
"to": "framework/solid/plugins/createPersister"
1334+
}
1335+
]
1336+
},
11301337
{
11311338
"label": "vue",
11321339
"children": [

docs/eslint/eslint-plugin-query.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ Alternatively, add `@tanstack/query` to the plugins section, and configure the r
9393

9494
## Rules
9595

96-
- [@tanstack/query/exhaustive-deps](./exhaustive-deps)
97-
- [@tanstack/query/no-rest-destructuring](./no-rest-destructuring)
98-
- [@tanstack/query/stable-query-client](./stable-query-client)
99-
- [@tanstack/query/no-unstable-deps](./no-unstable-deps)
100-
- [@tanstack/query/infinite-query-property-order](./infinite-query-property-order)
96+
- [@tanstack/query/exhaustive-deps](./exhaustive-deps.md)
97+
- [@tanstack/query/no-rest-destructuring](./no-rest-destructuring.md)
98+
- [@tanstack/query/stable-query-client](./stable-query-client.md)
99+
- [@tanstack/query/no-unstable-deps](./no-unstable-deps.md)
100+
- [@tanstack/query/infinite-query-property-order](./infinite-query-property-order.md)

docs/framework/react/community/community-projects.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ The Missing Fullstack Toolkit for Next.js
2525

2626
Link: https://blitzjs.com/
2727

28+
## Connect
29+
30+
A family of libraries for building building browser and gRPC-compatible HTTP APIs.
31+
32+
Link: https://connectrpc.com/docs
33+
2834
## GraphQL Code Generator
2935

3036
Generate React Query hooks from your GraphQL schema
@@ -33,7 +39,7 @@ Link: https://the-guild.dev/graphql/codegen
3339

3440
## Http-wizard
3541

36-
End-to-end type-safe Fastify API with typecript magic ✨
42+
End-to-end type-safe Fastify API with typeScript magic ✨
3743

3844
Link: https://http-wizard.com
3945

docs/framework/react/community/tkdodos-blog.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: tkdodos-blog
33
title: TkDodo's Blog
44
---
55

6-
TanStack Query maintainer [TkDodo](https://twitter.com/tkdodo) has a series of blog posts about using and working with the library. Some articles show general best practices, but most have an _opinionated_ point of view.
6+
TanStack Query maintainer [TkDodo](https://bsky.app/profile/tkdodo.eu) has a series of blog posts about using and working with the library. Some articles show general best practices, but most have an _opinionated_ point of view.
77

88
## [#1: Practical React Query](https://tkdodo.eu/blog/practical-react-query)
99

docs/framework/react/guides/advanced-ssr.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,15 @@ title: Advanced Server Rendering
55

66
Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router.
77

8-
You might want to read the [Server Rendering & Hydration guide](./ssr) before this one as it teaches the basics for using React Query with SSR, and [Performance & Request Waterfalls](./request-waterfalls) as well as [Prefetching & Router Integration](./prefetching) also contains valuable background.
9-
10-
https://tanstack.com/query/latest/docs/framework/react/guides/ssr
8+
You might want to read the [Server Rendering & Hydration guide](./ssr.md) before this one as it teaches the basics for using React Query with SSR, and [Performance & Request Waterfalls](./request-waterfalls.md) as well as [Prefetching & Router Integration](./prefetching.md) also contains valuable background.
119

1210
Before we start, let's note that while the `initialData` approach outlined in the SSR guide also works with Server Components, we'll focus this guide on the hydration APIs.
1311

1412
## Server Components & Next.js app router
1513

1614
We won't cover Server Components in depth here, but the short version is that they are components that are guaranteed to _only_ run on the server, both for the initial page view and **also on page transitions**. This is similar to how Next.js `getServerSideProps`/`getStaticProps` and Remix `loader` works, as these also always run on the server but while those can only return data, Server Components can do a lot more. The data part is central to React Query however, so let's focus on that.
1715

18-
How do we take what we learned in the Server Rendering guide about [passing data prefetched in framework loaders to the app](./ssr#using-the-hydration-apis) and apply that to Server Components and the Next.js app router? The best way to start thinking about this is to consider Server Components as "just" another framework loader.
16+
How do we take what we learned in the Server Rendering guide about [passing data prefetched in framework loaders to the app](./ssr.md#using-the-hydration-apis) and apply that to Server Components and the Next.js app router? The best way to start thinking about this is to consider Server Components as "just" another framework loader.
1917

2018
### A quick note on terminology
2119

@@ -532,7 +530,7 @@ export default function Posts() {
532530

533531
Now, your `getPosts` function can return e.g. `Temporal` datetime objects and the data will be serialized and deserialized on the client, assuming your transformer can serialize and deserialize those data types.
534532

535-
For more information, check out the [Next.js App with Prefetching Example](../../examples/nextjs-app-prefetching).
533+
For more information, check out the [Next.js App with Prefetching Example](../examples/react/nextjs-app-prefetching).
536534

537535
## Experimental streaming without prefetching in Next.js
538536

@@ -599,11 +597,11 @@ export function Providers(props: { children: React.ReactNode }) {
599597
}
600598
```
601599

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

604602
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.
605603

606-
The downside is easiest to explain if we look back at [the complex request waterfall example](./request-waterfalls#code-splitting) in the Performance & Request Waterfalls guide. Server Components with prefetching effectively eliminates the request waterfalls both for the initial page load **and** any subsequent navigation. This prefetch-less approach however will only flatten the waterfalls on the initial page load but ends up the same deep waterfall as the original example on page navigations:
604+
The downside is easiest to explain if we look back at [the complex request waterfall example](./request-waterfalls.md#code-splitting) in the Performance & Request Waterfalls guide. Server Components with prefetching effectively eliminates the request waterfalls both for the initial page load **and** any subsequent navigation. This prefetch-less approach however will only flatten the waterfalls on the initial page load but ends up the same deep waterfall as the original example on page navigations:
607605

608606
```
609607
1. |> JS for <Feed>

docs/framework/react/guides/caching.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: caching
33
title: Caching Examples
44
---
55

6-
> Please thoroughly read the [Important Defaults](./important-defaults) before reading this guide
6+
> Please thoroughly read the [Important Defaults](./important-defaults.md) before reading this guide
77
88
## Basic Example
99

@@ -23,7 +23,7 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default
2323
- A second instance of `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` mounts elsewhere.
2424
- Since the cache already has data for the `['todos']` key from the first query, that data is immediately returned from the cache.
2525
- The new instance triggers a new network request using its query function.
26-
- 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.
26+
- Note that regardless of whether both `fetchTodos` query functions are identical or not, both queries' [`status`](../reference/useQuery.md) are updated (including `isFetching`, `isPending`, and other related values) because they have the same query key.
2727
- 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.
2828
- Both instances of the `useQuery({ queryKey: ['todos'], queryFn: fetchTodos })` query are unmounted and no longer in use.
2929
- 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**).

docs/framework/react/guides/dependent-queries.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,6 @@ const usersMessages = useQueries({
9090

9191
## A note about performance
9292

93-
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.
93+
Dependent queries by definition constitutes a form of [request waterfall](./request-waterfalls.md), 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.
9494

9595
In the example above, instead of first fetching `getUserByEmail` to be able to `getProjectsByUser`, introducing a new `getProjectsByUserEmail` query would flatten the waterfall.

docs/framework/react/guides/important-defaults.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Out of the box, TanStack Query is configured with **aggressive but sane** defaul
3636

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

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

4242
[//]: # 'Materials'

0 commit comments

Comments
 (0)