kitten.sh
1'use client';
2
3import * as React from 'react';
4import type { SSRExchange, Client } from 'urql';
5import { Provider } from 'urql';
6import { DataHydrationContextProvider } from './DataHydrationContext';
7
8export const SSRContext = React.createContext<SSRExchange | undefined>(
9 undefined
10);
11
12/** Provider for `@urql/next` during non-rsc interactions.
13 *
14 * @remarks
15 * `Provider` accepts a {@link Client} and provides it to all GraphQL hooks, it
16 * also accepts an {@link SSRExchange} to distribute data when re-hydrating
17 * on the client.
18 *
19 * @example
20 * ```tsx
21 * import { useMemo } from 'react';
22 * import {
23 * UrqlProvider,
24 * ssrExchange,
25 * cacheExchange,
26 * fetchExchange,
27 * createClient,
28 * } from '@urql/next';
29 *
30 * export default function Layout({ children }: React.PropsWithChildren) {
31 * const [client, ssr] = useMemo(() => {
32 * const ssr = ssrExchange();
33 * const client = createClient({
34 * url: 'https://trygql.formidable.dev/graphql/web-collections',
35 * exchanges: [cacheExchange, ssr, fetchExchange],
36 * suspense: true,
37 * });
38 *
39 * return [client, ssr];
40 * }, []);
41 *
42 * return (
43 * <UrqlProvider client={client} ssr={ssr}>
44 * {children}
45 * </UrqlProvider>
46 * );
47 * }
48 *
49 * ```
50 */
51export function UrqlProvider({
52 children,
53 ssr,
54 client,
55 nonce,
56}: React.PropsWithChildren<{
57 ssr: SSRExchange;
58 client: Client;
59 nonce?: string;
60}>) {
61 return React.createElement(
62 Provider,
63 { value: client },
64 React.createElement(
65 SSRContext.Provider,
66 { value: ssr },
67 React.createElement(DataHydrationContextProvider, { nonce }, children)
68 )
69 );
70}