Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(docs): correct file extensions to .tsx and add type annotations #8259

Merged
merged 4 commits into from
Nov 8, 2024
Merged

fix(docs): correct file extensions to .tsx and add type annotations #8259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d755940
Fix typo: 'hydrate' to 'dehydrate' in documentation
Ariel-Moroshko Oct 16, 2024
9da12ff
fix: correct file extensions to .tsx and add type annotations
Ariel-Moroshko Nov 7, 2024
b3726f8
Merge branch 'TanStack:main' into main
Ariel-Moroshko Nov 7, 2024
0f76f95
ci: apply automated fixes
autofix-ci[bot] Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 16 additions & 12 deletions docs/framework/react/guides/advanced-ssr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -78,10 +78,14 @@ 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 (
<html lang="en">
<head />
Expand All @@ -100,7 +104,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,
Expand Down Expand Up @@ -157,7 +161,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,
Expand Down Expand Up @@ -186,7 +190,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() {
Expand Down Expand Up @@ -221,7 +225,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,
Expand All @@ -246,7 +250,7 @@ export default async function PostsPage() {
)
}

// app/posts/comments-server.jsx
// app/posts/comments-server.tsx
import {
dehydrate,
HydrationBoundary,
Expand Down Expand Up @@ -290,7 +294,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'

Expand All @@ -310,7 +314,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,
Expand Down Expand Up @@ -367,7 +371,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
Expand Down Expand Up @@ -415,7 +419,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'
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guides/ssr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ export default function MyApp({ Component, pageProps }) {
In each route:

```tsx
// pages/posts.jsx
// pages/posts.tsx
import {
dehydrate,
HydrationBoundary,
Expand Down
Loading