Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
docs(next): move ssr and client creation to function body (#3368)
authored by
Jovi De Croock
and committed by
GitHub
0db6e0a3
47fdb665
+24
-14
+12
-7
docs/advanced/server-side-rendering.md
+12
-7
docs/advanced/server-side-rendering.md
···
232
232
// app/client/layout.tsx
233
233
'use client';
234
234
235
+
import { useMemo } from 'react';
235
236
import { UrqlProvider, ssrExchange, cacheExchange, fetchExchange, createClient } from '@urql/next';
236
237
237
-
const ssr = ssrExchange();
238
-
const client = createClient({
239
-
url: 'https://trygql.formidable.dev/graphql/web-collections',
240
-
exchanges: [cacheExchange, ssr, fetchExchange],
241
-
suspense: true,
242
-
});
238
+
export default function Layout({ children }: React.PropsWithChildren) {
239
+
const [client, ssr] = useMemo(() => {
240
+
const ssr = ssrExchange();
241
+
const client = createClient({
242
+
url: 'https://trygql.formidable.dev/graphql/web-collections',
243
+
exchanges: [cacheExchange, ssr, fetchExchange],
244
+
suspense: true,
245
+
});
246
+
247
+
return [client, ssr];
248
+
}, []);
243
249
244
-
export default function Layout({ children }: React.PropsWithChildren) {
245
250
return (
246
251
<UrqlProvider client={client} ssr={ssr}>
247
252
{children}
+12
-7
examples/with-next/app/non-rsc/layout.tsx
+12
-7
examples/with-next/app/non-rsc/layout.tsx
···
1
1
'use client';
2
2
3
+
import { useMemo } from 'react';
3
4
import {
4
5
UrqlProvider,
5
6
ssrExchange,
···
8
9
createClient,
9
10
} from '@urql/next';
10
11
11
-
const ssr = ssrExchange();
12
-
const client = createClient({
13
-
url: 'https://graphql-pokeapi.graphcdn.app/',
14
-
exchanges: [cacheExchange, ssr, fetchExchange],
15
-
suspense: true,
16
-
});
12
+
export default function Layout({ children }: React.PropsWithChildren) {
13
+
const [client, ssr] = useMemo(() => {
14
+
const ssr = ssrExchange();
15
+
const client = createClient({
16
+
url: 'https://graphql-pokeapi.graphcdn.app/',
17
+
exchanges: [cacheExchange, ssr, fetchExchange],
18
+
suspense: true,
19
+
});
20
+
21
+
return [client, ssr];
22
+
}, []);
17
23
18
-
export default function Layout({ children }: React.PropsWithChildren) {
19
24
return (
20
25
<UrqlProvider client={client} ssr={ssr}>
21
26
{children}