diff --git a/docs/react/guides/ssr.md b/docs/react/guides/ssr.md index b416336ee5..02d80fd3fb 100644 --- a/docs/react/guides/ssr.md +++ b/docs/react/guides/ssr.md @@ -302,19 +302,19 @@ ReactDOM.hydrate( ## Using the `app` Directory in Next.js 13 -Both prefetching approaches, using `initialData` or ``, are available within the `app` directory. +Both prefetching approaches, using `initialData` or ``, are available within the `app` directory. - Prefetch the data in a Server Component and prop drill `initialData` to Client Components - Quick to set up for simple cases - May need to prop drill through multiple layers of Client Components - May need to prop drill to multiple Client Components using the same query - Query refetching is based on when the page loads instead of when the data was prefetched on the server -- Prefetch the query on the server, dehydrate the cache and rehydrate it on the client with `` +- Prefetch the query on the server, dehydrate the cache and rehydrate it on the client with `` - Requires slightly more setup up front - No need to prop drill - Query refetching is based on when the query was prefetched on the server -### `` is required by both the `initialData` and `` prefetching approaches +### `` is required by both the `initialData` and `` prefetching approaches The hooks provided by the `react-query` package need to retrieve a `QueryClient` from their context. Wrap your component tree with `` and pass it an instance of `QueryClient`. @@ -379,7 +379,7 @@ export function Posts(props) { } ``` -### Using `` +### Using `` Create a request-scoped singleton instance of `QueryClient`. **This ensures that data is not shared between different users and requests, while still only creating the QueryClient once per request.** @@ -397,30 +397,33 @@ Fetch your data in a Server Component higher up in the component tree than the C - Retrieve the `QueryClient` singleton instance - Prefetch the data using the client's prefetchQuery method and wait for it to complete - Use `dehydrate` to obtain the dehydrated state of the prefetched queries from the query cache -- Wrap the component tree that needs the prefetched queries inside ``, and provide it with the dehydrated state -- You can fetch inside multiple Server Components and use `` in multiple places +- Wrap the component tree that needs the prefetched queries inside ``, and provide it with the dehydrated state +- You can fetch inside multiple Server Components and use `` in multiple places > NOTE: TypeScript currently complains of a type error when using async Server Components. As a temporary workaround, use `{/* @ts-expect-error Server Component */}` when calling this component inside another. For more information, see [End-to-End Type Safety](https://beta.nextjs.org/docs/configuring/typescript#end-to-end-type-safety) in the Next.js 13 beta docs. ```tsx // app/hydratedPosts.jsx -import { dehydrate, Hydrate } from '@tanstack/react-query' +import { dehydrate, HydrationBoundary } from '@tanstack/react-query' import getQueryClient from './getQueryClient' export default async function HydratedPosts() { const queryClient = getQueryClient() - await queryClient.prefetchQuery(['posts'], getPosts) + + await queryClient.prefetchQuery({querykey:['posts'], queryFn:getPosts}) + // for infinite queries with useInfiniteQuery use + // await queryClient.prefetchInfiniteQuery({queryKey:['posts'], queryFn:getPosts,...}) const dehydratedState = dehydrate(queryClient) return ( - + - + ) } ``` -During server rendering, calls to `useQuery` nested within the `` Client Component will have access to prefetched data provided in the state property. +During server rendering, calls to `useQuery` nested within the `` Client Component will have access to prefetched data provided in the state property. ```tsx // app/posts.jsx diff --git a/docs/svelte/overview.md b/docs/svelte/overview.md index 03d840dae6..978ab543d5 100644 --- a/docs/svelte/overview.md +++ b/docs/svelte/overview.md @@ -64,7 +64,7 @@ Svelte Query offers useful functions and components that will make managing serv - `useIsMutating` - `useHydrate` - `` -- `` +- `` ## Important Differences between Svelte Query & React Query