put the ssr and client creation inside of the React function body to …

…avoid leaking ssr results
urql-graphql · Sep 2, 2023 · a317772 · a317772
1 parent 47fdb66
commit a317772
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/docs/advanced/server-side-rendering.md b/docs/advanced/server-side-rendering.md
@@ -232,16 +232,21 @@ structure it as the following.
 // app/client/layout.tsx
 'use client';
 
+import { useMemo } from 'react';
 import { UrqlProvider, ssrExchange, cacheExchange, fetchExchange, createClient } from '@urql/next';
 
-const ssr = ssrExchange();
-const client = createClient({
-  url: 'https://trygql.formidable.dev/graphql/web-collections',
-  exchanges: [cacheExchange, ssr, fetchExchange],
-  suspense: true,
-});
-
 export default function Layout({ children }: React.PropsWithChildren) {
+  const [client, ssr] = useMemo(() => {
+    const ssr = ssrExchange();
+    const client = createClient({
+      url: 'https://trygql.formidable.dev/graphql/web-collections',
+      exchanges: [cacheExchange, ssr, fetchExchange],
+      suspense: true,
+    });
+
+    return [client, ssr];
+  }, []);
+
   return (
     <UrqlProvider client={client} ssr={ssr}>
       {children}

diff --git a/examples/with-next/app/non-rsc/layout.tsx b/examples/with-next/app/non-rsc/layout.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useMemo } from 'react';
 import {
   UrqlProvider,
   ssrExchange,
@@ -8,14 +9,18 @@ import {
   createClient,
 } from '@urql/next';
 
-const ssr = ssrExchange();
-const client = createClient({
-  url: 'https://graphql-pokeapi.graphcdn.app/',
-  exchanges: [cacheExchange, ssr, fetchExchange],
-  suspense: true,
-});
-
 export default function Layout({ children }: React.PropsWithChildren) {
+  const [client, ssr] = useMemo(() => {
+    const ssr = ssrExchange();
+    const client = createClient({
+      url: 'https://trygql.formidable.dev/graphql/web-collections',
+      exchanges: [cacheExchange, ssr, fetchExchange],
+      suspense: true,
+    });
+
+    return [client, ssr];
+  }, []);
+
   return (
     <UrqlProvider client={client} ssr={ssr}>
       {children}