refactor(react-query-next-experimental): use isServer to determine se…

…rver 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 <office@dorfmeister.cc>
TanStack · Jun 8, 2024 · 4e1a04b · 4e1a04b
1 parent dd4ee0a
commit 4e1a04b
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -98,7 +98,7 @@ export function createHydrationStreamProvider<TShape>() {
 
     // <server stuff>
     const [stream] = React.useState<Array<TShape>>(() => {
-      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
@@ -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<string>())
 
   // <server only>
-  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) {