From 4e1a04b5066931b1f158fb3ec5275da2961fc2a9 Mon Sep 17 00:00:00 2001 From: Hwang Taehwan <107744534+stakbucks@users.noreply.github.com> Date: Sun, 9 Jun 2024 02:37:05 +0900 Subject: [PATCH] refactor(react-query-next-experimental): use isServer to determine server environment (#7536) * docs: use isServer on ssr guides * refactor: use isServer on nextjs examples * refactor(react-query-next-experimental): use isServer instead of typeof window * chore(docs): fix prettier --------- Co-authored-by: Dominik Dorfmeister --- docs/framework/react/guides/advanced-ssr.md | 16 ++++++++++++---- docs/framework/react/guides/suspense.md | 8 ++++++-- .../app/get-query-client.ts | 8 ++++++-- .../nextjs-suspense-streaming/src/app/page.tsx | 4 ++-- .../src/app/providers.tsx | 8 ++++++-- .../src/HydrationStreamProvider.tsx | 2 +- .../src/ReactQueryStreamedHydration.tsx | 3 ++- 7 files changed, 35 insertions(+), 14 deletions(-) diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md index 33267b084a..55930f0c55 100644 --- a/docs/framework/react/guides/advanced-ssr.md +++ b/docs/framework/react/guides/advanced-ssr.md @@ -30,7 +30,11 @@ The first step of any React Query setup is always to create a `queryClient` and 'use client' // Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + isServer, + QueryClient, + QueryClientProvider, +} from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ @@ -47,7 +51,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { // Server: always make a new query client return makeQueryClient() } else { @@ -441,7 +445,11 @@ To achieve this, wrap your app in the `ReactQueryStreamedHydration` component: // app/providers.tsx 'use client' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + isServer, + QueryClient, + QueryClientProvider, +} from '@tanstack/react-query' import * as React from 'react' import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental' @@ -460,7 +468,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { // Server: always make a new query client return makeQueryClient() } else { diff --git a/docs/framework/react/guides/suspense.md b/docs/framework/react/guides/suspense.md index 2c7a8bc97b..8049078587 100644 --- a/docs/framework/react/guides/suspense.md +++ b/docs/framework/react/guides/suspense.md @@ -118,7 +118,11 @@ To achieve this, wrap your app in the `ReactQueryStreamedHydration` component: // app/providers.tsx 'use client' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + isServer, + QueryClient, + QueryClientProvider, +} from '@tanstack/react-query' import * as React from 'react' import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental' @@ -137,7 +141,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { // Server: always make a new query client return makeQueryClient() } else { diff --git a/examples/react/nextjs-app-prefetching/app/get-query-client.ts b/examples/react/nextjs-app-prefetching/app/get-query-client.ts index af725f2a96..9ca1cc407e 100644 --- a/examples/react/nextjs-app-prefetching/app/get-query-client.ts +++ b/examples/react/nextjs-app-prefetching/app/get-query-client.ts @@ -1,4 +1,8 @@ -import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query' +import { + QueryClient, + defaultShouldDehydrateQuery, + isServer, +} from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ @@ -19,7 +23,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined export function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { // Server: always make a new query client return makeQueryClient() } else { diff --git a/examples/react/nextjs-suspense-streaming/src/app/page.tsx b/examples/react/nextjs-suspense-streaming/src/app/page.tsx index 50fa21bfae..4c17668cbc 100644 --- a/examples/react/nextjs-suspense-streaming/src/app/page.tsx +++ b/examples/react/nextjs-suspense-streaming/src/app/page.tsx @@ -1,11 +1,11 @@ 'use client' -import { useSuspenseQuery } from '@tanstack/react-query' +import { isServer, useSuspenseQuery } from '@tanstack/react-query' import { Suspense } from 'react' export const runtime = 'edge' // 'nodejs' (default) | 'edge' function getBaseURL() { - if (typeof window !== 'undefined') { + if (!isServer) { return '' } if (process.env.VERCEL_URL) { diff --git a/examples/react/nextjs-suspense-streaming/src/app/providers.tsx b/examples/react/nextjs-suspense-streaming/src/app/providers.tsx index fb0f5a24e9..b4990842e5 100644 --- a/examples/react/nextjs-suspense-streaming/src/app/providers.tsx +++ b/examples/react/nextjs-suspense-streaming/src/app/providers.tsx @@ -1,6 +1,10 @@ 'use client' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClient, + QueryClientProvider, + isServer, +} from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import * as React from 'react' import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental' @@ -18,7 +22,7 @@ function makeQueryClient() { let browserQueryClient: QueryClient | undefined = undefined function getQueryClient() { - if (typeof window === 'undefined') { + if (isServer) { return makeQueryClient() } else { if (!browserQueryClient) browserQueryClient = makeQueryClient() diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx index 8e3f3fd816..187b8bcb0d 100644 --- a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx +++ b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx @@ -98,7 +98,7 @@ export function createHydrationStreamProvider() { // const [stream] = React.useState>(() => { - if (typeof window !== 'undefined') { + if (!isServer) { return { push() { // no-op on the client diff --git a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx index 3a831e0d72..737fdeb09d 100644 --- a/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx +++ b/packages/react-query-next-experimental/src/ReactQueryStreamedHydration.tsx @@ -4,6 +4,7 @@ import { defaultShouldDehydrateQuery, dehydrate, hydrate, + isServer, useQueryClient, } from '@tanstack/react-query' import * as React from 'react' @@ -40,7 +41,7 @@ export function ReactQueryStreamedHydration(props: { const [trackedKeys] = React.useState(() => new Set()) // - if (typeof window === 'undefined') { + if (isServer) { // Do we need to care about unsubscribing? I don't think so to be honest queryClient.getQueryCache().subscribe((event) => { switch (event.type) {