Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(next-urql) - Pass resetUrqlClient method to App/Page (#894)
* make initial draft for resetting the active urql-client instance
* document the feature
* Apply suggestions from code review
authored by
Jovi De Croock
and committed by
GitHub
facb48c4
7696323f
+42
-4
+5
.changeset/rotten-pandas-obey.md
+5
.changeset/rotten-pandas-obey.md
+8
docs/advanced/server-side-rendering.md
+8
docs/advanced/server-side-rendering.md
···
240
240
241
241
Unless the component that is being wrapped already has a `getInitialProps` method, `next-urql` won't add its own SSR logic, which automatically fetches queries during
242
242
server-side rendering. This can be explicitly enabled by passing the `{ ssr: true }` option as a second argument to `withUrqlClient`.
243
+
244
+
### Resetting the client instance
245
+
246
+
In rare scenario's you possibly will have to reset the client instance (reset all cache, ...), this is an uncommon scenario
247
+
and we consider it "unsafe" so evaluate this carefully for yourself.
248
+
249
+
When this does seem like the appropriate solution any component wrapped with `withUrqlClient` will receive the `resetUrqlClient`
250
+
property, when invoked this will create a new top-level client and reset all prior operations.
+8
packages/next-urql/README.md
+8
packages/next-urql/README.md
···
121
121
122
122
In client-side SPAs using `urql`, you typically configure the Client yourself and pass it as the `value` prop to `urql`'s context `Provider`. `withUrqlClient` handles setting all of this up for you under the hood. By default, you'll be opted into server-side `Suspense` and have the necessary `exchanges` set up for you, including the [`ssrExchange`](https://formidable.com/open-source/urql/docs/api/#ssrexchange-exchange-factory).
123
123
124
+
### Resetting the client instance
125
+
126
+
In rare scenario's you possibly will have to reset the client instance (reset all cache, ...), this is an uncommon scenario
127
+
and we consider it "unsafe" so evaluate this carefully for yourself.
128
+
129
+
When this does seem like the appropriate solution any component wrapped with `withUrqlClient` will receive the `resetUrqlClient`
130
+
property, when invoked this will create a new top-level client and reset all prior operations.
131
+
124
132
#### `exchanges`
125
133
126
134
When you're using `withUrqlClient` and you don't return an `exchanges` property we'll assume you wanted the default exchanges, these contain: `dedupExchange`, `cacheExchange`, `ssrExchange` (the one you received as a first argument) and the `fetchExchange`.
+4
packages/next-urql/src/init-urql-client.ts
+4
packages/next-urql/src/init-urql-client.ts
+17
-4
packages/next-urql/src/with-urql-client.tsx
+17
-4
packages/next-urql/src/with-urql-client.tsx
···
1
-
import React from 'react';
1
+
import React, { useState } from 'react';
2
2
import { NextPage, NextPageContext } from 'next';
3
3
import NextApp, { AppContext } from 'next/app';
4
4
import ssrPrepass from 'react-ssr-prepass';
···
10
10
fetchExchange,
11
11
} from 'urql';
12
12
13
-
import { initUrqlClient } from './init-urql-client';
13
+
import { initUrqlClient, resetClient } from './init-urql-client';
14
14
import {
15
15
NextUrqlClientConfig,
16
16
NextUrqlContext,
···
36
36
37
37
const withUrql = ({ urqlClient, urqlState, ...rest }: WithUrqlProps) => {
38
38
// eslint-disable-next-line react-hooks/rules-of-hooks
39
+
const forceUpdate = useState(0);
40
+
41
+
// eslint-disable-next-line react-hooks/rules-of-hooks
39
42
const client = React.useMemo(() => {
40
43
if (urqlClient) {
41
44
return urqlClient;
···
57
60
58
61
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
59
62
return initUrqlClient(clientConfig, shouldBindGetInitialprops)!;
60
-
}, [urqlClient, urqlState]);
63
+
}, [urqlClient, urqlState, forceUpdate[0]]);
64
+
65
+
const resetUrqlClient = () => {
66
+
resetClient();
67
+
ssr = ssrExchange({ initialState: undefined });
68
+
forceUpdate[1](forceUpdate[0] + 1);
69
+
};
61
70
62
71
return (
63
72
<Provider value={client}>
64
-
<AppOrPage urqlClient={client} {...rest} />
73
+
<AppOrPage
74
+
urqlClient={client}
75
+
resetUrqlClient={resetUrqlClient}
76
+
{...rest}
77
+
/>
65
78
</Provider>
66
79
);
67
80
};