Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
next-urql: Ensure ctx in clientOptions is available during all stages of SSR (#719)
authored by
Parker Ziegler
and committed by
GitHub
2db2cbd5
12b2e61c
+19
-7
+5
.changeset/eighty-turkeys-jam.md
+5
.changeset/eighty-turkeys-jam.md
···
1
+
---
2
+
'next-urql': patch
3
+
---
4
+
5
+
Ensure that the Next.js context is available during all stages of SSR. Previously a missing check in `useMemo` on the server-side caused `clientConfig` from being called repeatedly, and another issue may have caused the client from being serialized to initial props.
+1
-2
packages/next-urql/src/__tests__/with-urql-client.spec.tsx
+1
-2
packages/next-urql/src/__tests__/with-urql-client.spec.tsx
···
47
47
expect(spyInitUrqlClient).toHaveBeenCalledTimes(1);
48
48
});
49
49
50
-
it('should create the urql client instance server-side inside getInitialProps and client-side in the component', async () => {
50
+
it('should create the urql client instance server-side inside getInitialProps', async () => {
51
51
const props =
52
52
Component.getInitialProps &&
53
53
(await Component.getInitialProps(mockContext));
···
56
56
const tree = shallow(<Component {...props} />);
57
57
const app = tree.find(MockApp);
58
58
59
-
expect(spyInitUrqlClient).toHaveBeenCalledTimes(2);
60
59
expect(app.props().urqlClient).toBeInstanceOf(Client);
61
60
expect(app.props().urqlClient.url).toEqual('http://localhost:3000');
62
61
});
+13
-5
packages/next-urql/src/with-urql-client.tsx
+13
-5
packages/next-urql/src/with-urql-client.tsx
···
29
29
const withUrql = ({ urqlClient, urqlState, ...rest }: WithUrqlProps) => {
30
30
// eslint-disable-next-line react-hooks/rules-of-hooks
31
31
const client = React.useMemo(() => {
32
+
if (urqlClient) {
33
+
return urqlClient;
34
+
}
35
+
32
36
const clientOptions =
33
37
typeof clientConfig === 'function' ? clientConfig() : clientConfig;
34
38
35
-
return (
36
-
urqlClient ||
37
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
38
-
initUrqlClient(clientOptions, mergeExchanges, urqlState)[0]!
39
-
);
39
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
40
+
return initUrqlClient(clientOptions, mergeExchanges, urqlState)[0]!;
40
41
}, [urqlClient, urqlState]);
41
42
42
43
return (
···
85
86
// Run the prepass step on AppTree. This will run all urql queries on the server.
86
87
await ssrPrepass(<AppTree {...appTreeProps} />);
87
88
89
+
// Serialize the urqlClient to null on the client-side.
90
+
// This ensures we don't share client and server instances of the urqlClient.
91
+
(urqlClient as any).toJSON = () => {
92
+
return null;
93
+
};
94
+
88
95
return {
89
96
...pageProps,
90
97
urqlState: ssrCache ? ssrCache.extractData() : undefined,
98
+
urqlClient,
91
99
};
92
100
};
93
101