From d7559405e28ed5df295847a14f0173ee69af5f03 Mon Sep 17 00:00:00 2001
From: Ariel-Moroshko <45500865+Ariel-Moroshko@users.noreply.github.com>
Date: Wed, 16 Oct 2024 15:39:44 +0300
Subject: [PATCH 1/3] Fix typo: 'hydrate' to 'dehydrate' in documentation
---
docs/framework/react/guides/advanced-ssr.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md
index 65c10eb6d1..e402cc4d77 100644
--- a/docs/framework/react/guides/advanced-ssr.md
+++ b/docs/framework/react/guides/advanced-ssr.md
@@ -365,7 +365,7 @@ With the prefetching patterns described above, React Query is perfectly compatib
As of React Query v5.40.0, you don't have to `await` all prefetches for this to work, as `pending` Queries can also be dehydrated and sent to the client. This lets you kick off prefetches as early as possible without letting them block an entire Suspense boundary, and streams the _data_ to the client as the query finishes. This can be useful for example if you want to prefetch some content that is only visible after some user interaction, or say if you want to `await` and render the first page of an infinite query, but start prefetching page 2 without blocking rendering.
-To make this work, we have to instruct the `queryClient` to also `dehydrate` pending Queries. We can do this globally, or by passing that option directly to `hydrate`.
+To make this work, we have to instruct the `queryClient` to also `dehydrate` pending Queries. We can do this globally, or by passing that option directly to `dehydrate`.
We will also need to move the `getQueryClient()` function out of our `app/providers.jsx` file as we want to use it in our server component and our client provider.
From 9da12ff22aea908f863b60339cae72fefc597126 Mon Sep 17 00:00:00 2001
From: Ariel-Moroshko <45500865+Ariel-Moroshko@users.noreply.github.com>
Date: Thu, 7 Nov 2024 19:03:53 +0200
Subject: [PATCH 2/3] fix: correct file extensions to .tsx and add type
annotations
---
docs/framework/react/guides/advanced-ssr.md | 24 ++++++++++-----------
docs/framework/react/guides/ssr.md | 2 +-
2 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md
index e402cc4d77..fba8f9eef1 100644
--- a/docs/framework/react/guides/advanced-ssr.md
+++ b/docs/framework/react/guides/advanced-ssr.md
@@ -64,7 +64,7 @@ function getQueryClient() {
}
}
-export default function Providers({ children }) {
+export default function Providers({ children }: { children: React.ReactNode }) {
// NOTE: Avoid useState when initializing the query client if you don't
// have a suspense boundary between this and the code that may
// suspend because React will throw away the client on the initial
@@ -78,10 +78,10 @@ export default function Providers({ children }) {
```
```tsx
-// In Next.js, this file would be called: app/layout.jsx
+// In Next.js, this file would be called: app/layout.tsx
import Providers from './providers'
-export default function RootLayout({ children }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
@@ -100,7 +100,7 @@ This part is pretty similar to what we did in the SSR guide, we just need to spl
Let's next look at how to actually prefetch data and dehydrate and hydrate it. This is what it looked like using the **Next.js pages router**:
```tsx
-// pages/posts.jsx
+// pages/posts.tsx
import {
dehydrate,
HydrationBoundary,
@@ -157,7 +157,7 @@ export default function PostsRoute({ dehydratedState }) {
Converting this to the app router actually looks pretty similar, we just need to move things around a bit. First, we'll create a Server Component to do the prefetching part:
```tsx
-// app/posts/page.jsx
+// app/posts/page.tsx
import {
dehydrate,
HydrationBoundary,
@@ -186,7 +186,7 @@ export default async function PostsPage() {
Next, we'll look at what the Client Component part looks like:
```tsx
-// app/posts/posts.jsx
+// app/posts/posts.tsx
'use client'
export default function Posts() {
@@ -221,7 +221,7 @@ In the SSR guide, we noted that you could get rid of the boilerplate of having `
A nice thing about Server Components is that they can be nested and exist on many levels in the React tree, making it possible to prefetch data closer to where it's actually used instead of only at the top of the application (just like Remix loaders). This can be as simple as a Server Component rendering another Server Component (we'll leave the Client Components out in this example for brevity):
```tsx
-// app/posts/page.jsx
+// app/posts/page.tsx
import {
dehydrate,
HydrationBoundary,
@@ -246,7 +246,7 @@ export default async function PostsPage() {
)
}
-// app/posts/comments-server.jsx
+// app/posts/comments-server.tsx
import {
dehydrate,
HydrationBoundary,
@@ -290,7 +290,7 @@ As more frameworks start supporting Server Components, they might have other rou
In the example above, we create a new `queryClient` for each Server Component that fetches data. This is the recommended approach, but if you want to, you can alternatively create a single one that is reused across all Server Components:
```tsx
-// app/getQueryClient.jsx
+// app/getQueryClient.tsx
import { QueryClient } from '@tanstack/react-query'
import { cache } from 'react'
@@ -310,7 +310,7 @@ Next.js already dedupes requests that utilize `fetch()`, but if you are using so
With Server Components, it's important to think about data ownership and revalidation. To explain why, let's look at a modified example from above:
```tsx
-// app/posts/page.jsx
+// app/posts/page.tsx
import {
dehydrate,
HydrationBoundary,
@@ -367,7 +367,7 @@ As of React Query v5.40.0, you don't have to `await` all prefetches for this to
To make this work, we have to instruct the `queryClient` to also `dehydrate` pending Queries. We can do this globally, or by passing that option directly to `dehydrate`.
-We will also need to move the `getQueryClient()` function out of our `app/providers.jsx` file as we want to use it in our server component and our client provider.
+We will also need to move the `getQueryClient()` function out of our `app/providers.tsx` file as we want to use it in our server component and our client provider.
```tsx
// app/get-query-client.ts
@@ -415,7 +415,7 @@ export function getQueryClient() {
Then, all we need to do is provide a `HydrationBoundary`, but we don't need to `await` prefetches anymore:
```tsx
-// app/posts/page.jsx
+// app/posts/page.tsx
import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
import { getQueryClient } from './get-query-client'
import Posts from './posts'
diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md
index 63ad7ecc8e..55910fc84b 100644
--- a/docs/framework/react/guides/ssr.md
+++ b/docs/framework/react/guides/ssr.md
@@ -214,7 +214,7 @@ export default function MyApp({ Component, pageProps }) {
In each route:
```tsx
-// pages/posts.jsx
+// pages/posts.tsx
import {
dehydrate,
HydrationBoundary,
From 0f76f9589ce6212ed792a147a6449569bdb7d960 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:08:40 +0000
Subject: [PATCH 3/3] ci: apply automated fixes
---
docs/framework/react/guides/advanced-ssr.md | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md
index fba8f9eef1..515f1461da 100644
--- a/docs/framework/react/guides/advanced-ssr.md
+++ b/docs/framework/react/guides/advanced-ssr.md
@@ -81,7 +81,11 @@ export default function Providers({ children }: { children: React.ReactNode }) {
// In Next.js, this file would be called: app/layout.tsx
import Providers from './providers'
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
return (