Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(next-urql) - disable suspense when we aren't binding getInitialProps (#884)
* disable suspense when we aren't binding getInitialProps, enabling this without getInitialProps means we aren't using prepass which results in react-dom/server throwing an error about suspense not being supported server-side
* add changeset
* add next-urql to generated sandbox packages
* fix test
* Update .changeset/kind-goats-carry.md
authored by
Jovi De Croock
and committed by
GitHub
945d87fe
93e365d8
+45
-14
+5
.changeset/kind-goats-carry.md
+5
.changeset/kind-goats-carry.md
+1
.codesandbox/ci.json
+1
.codesandbox/ci.json
+19
-4
packages/next-urql/src/__tests__/init-urql-client.spec.ts
+19
-4
packages/next-urql/src/__tests__/init-urql-client.spec.ts
···
1
1
import { initUrqlClient } from '../init-urql-client';
2
2
3
3
describe('initUrqlClient', () => {
4
-
it('should return the urqlClient instance', () => {
5
-
const urqlClient = initUrqlClient({
6
-
url: 'http://localhost:3000',
7
-
});
4
+
it('should return the urqlClient instance (suspense)', () => {
5
+
const urqlClient = initUrqlClient(
6
+
{
7
+
url: 'http://localhost:3000',
8
+
},
9
+
true
10
+
);
8
11
9
12
expect(urqlClient).toHaveProperty('url', 'http://localhost:3000');
10
13
expect(urqlClient).toHaveProperty('suspense', true);
14
+
});
15
+
16
+
it('should return the urqlClient instance (no-suspense)', () => {
17
+
const urqlClient = initUrqlClient(
18
+
{
19
+
url: 'http://localhost:3000',
20
+
},
21
+
false
22
+
);
23
+
24
+
expect(urqlClient).toHaveProperty('url', 'http://localhost:3000');
25
+
expect(urqlClient).toHaveProperty('suspense', false);
11
26
});
12
27
});
+8
-5
packages/next-urql/src/__tests__/with-urql-client.spec.tsx
+8
-5
packages/next-urql/src/__tests__/with-urql-client.spec.tsx
···
97
97
it('should allow a user to access the ctx object from Next on the server', async () => {
98
98
Component.getInitialProps &&
99
99
(await Component.getInitialProps(mockContext));
100
-
expect(spyInitUrqlClient).toHaveBeenCalledWith({
101
-
url: 'http://localhost:3000',
102
-
fetchOptions: { headers: { Authorization: token } },
103
-
exchanges: [mockSsrExchange],
104
-
});
100
+
expect(spyInitUrqlClient).toHaveBeenCalledWith(
101
+
{
102
+
url: 'http://localhost:3000',
103
+
fetchOptions: { headers: { Authorization: token } },
104
+
exchanges: [mockSsrExchange],
105
+
},
106
+
true
107
+
);
105
108
});
106
109
});
107
110
+5
-2
packages/next-urql/src/init-urql-client.ts
+5
-2
packages/next-urql/src/init-urql-client.ts
···
3
3
4
4
let urqlClient: Client | null = null;
5
5
6
-
export function initUrqlClient(clientOptions: ClientOptions): Client | null {
6
+
export function initUrqlClient(
7
+
clientOptions: ClientOptions,
8
+
canEnableSuspense: boolean
9
+
): Client | null {
7
10
// Create a new Client for every server-side rendered request.
8
11
// This ensures we reset the state for each rendered page.
9
12
// If there is an exising client instance on the client-side, use it.
···
11
14
if (isServer || !urqlClient) {
12
15
urqlClient = createClient({
13
16
...clientOptions,
14
-
suspense: isServer || clientOptions.suspense,
17
+
suspense: canEnableSuspense && (isServer || clientOptions.suspense),
15
18
});
16
19
// Serialize the urqlClient to null on the client-side.
17
20
// This ensures we don't share client and server instances of the urqlClient.
+7
-3
packages/next-urql/src/with-urql-client.tsx
+7
-3
packages/next-urql/src/with-urql-client.tsx
···
30
30
) {
31
31
if (!options) options = {};
32
32
return (AppOrPage: NextPage<any> | typeof NextApp) => {
33
+
const shouldBindGetInitialprops = Boolean(
34
+
AppOrPage.getInitialProps || options!.ssr
35
+
);
36
+
33
37
const withUrql = ({ urqlClient, urqlState, ...rest }: WithUrqlProps) => {
34
38
// eslint-disable-next-line react-hooks/rules-of-hooks
35
39
const client = React.useMemo(() => {
···
52
56
}
53
57
54
58
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
55
-
return initUrqlClient(clientConfig)!;
59
+
return initUrqlClient(clientConfig, shouldBindGetInitialprops)!;
56
60
}, [urqlClient, urqlState]);
57
61
58
62
return (
···
65
69
// Set the displayName to indicate use of withUrqlClient.
66
70
withUrql.displayName = `withUrqlClient(${getDisplayName(AppOrPage)})`;
67
71
68
-
if (AppOrPage.getInitialProps || options!.ssr) {
72
+
if (shouldBindGetInitialprops) {
69
73
withUrql.getInitialProps = async (appOrPageCtx: NextUrqlContext) => {
70
74
const { AppTree } = appOrPageCtx;
71
75
···
86
90
fetchExchange,
87
91
];
88
92
}
89
-
const urqlClient = initUrqlClient(clientConfig);
93
+
const urqlClient = initUrqlClient(clientConfig, true);
90
94
91
95
if (urqlClient) {
92
96
(ctx as NextUrqlContext).urqlClient = urqlClient;