Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
fix(react-urql): Silence react render phase warning (#3095)
authored by
Phil Pluckthun
and committed by
GitHub
4ad1967a
9f5c9e63
+47
-9
+5
.changeset/good-ads-watch.md
+5
.changeset/good-ads-watch.md
+21
packages/react-urql/src/hooks/state.ts
+21
packages/react-urql/src/hooks/state.ts
···
1
+
import * as React from 'react';
2
+
1
3
export const initialState = {
2
4
fetching: false,
3
5
stale: false,
···
41
43
for (let i = 0, l = b.length; i < l; i++) if (a[i] !== b[i]) return true;
42
44
return false;
43
45
};
46
+
47
+
const reactSharedInternals = (React as any)
48
+
.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
49
+
50
+
export function deferDispatch<Dispatch extends React.Dispatch<any>>(
51
+
setState: Dispatch,
52
+
value: Dispatch extends React.Dispatch<infer State> ? State : void
53
+
) {
54
+
if (
55
+
process.env.NODE_ENV !== 'production' &&
56
+
!!reactSharedInternals &&
57
+
!!reactSharedInternals.ReactCurrentOwner &&
58
+
!!reactSharedInternals.ReactCurrentOwner.current
59
+
) {
60
+
Promise.resolve(value).then(setState);
61
+
} else {
62
+
setState(value);
63
+
}
64
+
}
+3
-3
packages/react-urql/src/hooks/useMutation.ts
+3
-3
packages/react-urql/src/hooks/useMutation.ts
···
13
13
} from '@urql/core';
14
14
15
15
import { useClient } from '../context';
16
-
import { initialState } from './state';
16
+
import { deferDispatch, initialState } from './state';
17
17
18
18
/** State of the last mutation executed by your {@link useMutation} hook.
19
19
*
···
155
155
156
156
const executeMutation = useCallback(
157
157
(variables: Variables, context?: Partial<OperationContext>) => {
158
-
setState({ ...initialState, fetching: true });
158
+
deferDispatch(setState, { ...initialState, fetching: true });
159
159
160
160
return pipe(
161
161
client.executeMutation<Data, Variables>(
···
165
165
toPromise
166
166
).then(result => {
167
167
if (isMounted.current) {
168
-
setState({
168
+
deferDispatch(setState, {
169
169
fetching: false,
170
170
stale: !!result.stale,
171
171
data: result.data,
+9
-3
packages/react-urql/src/hooks/useQuery.ts
+9
-3
packages/react-urql/src/hooks/useQuery.ts
···
17
17
import { useClient } from '../context';
18
18
import { useRequest } from './useRequest';
19
19
import { getCacheForClient } from './cache';
20
-
import { initialState, computeNextState, hasDepsChanged } from './state';
20
+
21
+
import {
22
+
deferDispatch,
23
+
initialState,
24
+
computeNextState,
25
+
hasDepsChanged,
26
+
} from './state';
21
27
22
28
/** Input arguments for the {@link useQuery} hook.
23
29
*
···
317
323
318
324
const updateResult = (result: Partial<UseQueryState<Data, Variables>>) => {
319
325
hasResult = true;
320
-
setState(state => {
326
+
deferDispatch(setState, state => {
321
327
const nextResult = computeNextState(state[1], result);
322
328
return state[1] !== nextResult
323
329
? [state[0], nextResult, state[2]]
···
353
359
...opts,
354
360
};
355
361
356
-
setState(state => {
362
+
deferDispatch(setState, state => {
357
363
const source = suspense
358
364
? pipe(
359
365
client.executeQuery(request, context),
+9
-3
packages/react-urql/src/hooks/useSubscription.ts
+9
-3
packages/react-urql/src/hooks/useSubscription.ts
···
13
13
14
14
import { useClient } from '../context';
15
15
import { useRequest } from './useRequest';
16
-
import { initialState, computeNextState, hasDepsChanged } from './state';
16
+
17
+
import {
18
+
deferDispatch,
19
+
initialState,
20
+
computeNextState,
21
+
hasDepsChanged,
22
+
} from './state';
17
23
18
24
/** Input arguments for the {@link useSubscription} hook.
19
25
*
···
257
263
const updateResult = (
258
264
result: Partial<UseSubscriptionState<Data, Variables>>
259
265
) => {
260
-
setState(state => {
266
+
deferDispatch(setState, state => {
261
267
const nextResult = computeNextState(state[1], result);
262
268
if (state[1] === nextResult) return state;
263
269
if (handlerRef.current && state[1].data !== nextResult.data) {
···
292
298
...opts,
293
299
});
294
300
295
-
setState(state => [source, state[1], deps]);
301
+
deferDispatch(setState, state => [source, state[1], deps]);
296
302
},
297
303
[client, args.context, request]
298
304
);