Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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}