commit 4ad1967aec83809c7d03a3901f3a5499cfa3af4c · kitten.sh/urql

+5

.changeset/good-ads-watch.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       'urql': patch

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Silence "Cannot update a component (%s) while rendering a different component (%s)." warning forcefully.

+21

packages/react-urql/src/hooks/state.ts

···

       1
       1
       +
       import * as React from 'react';

     

       2
       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
       46
       +
       

     

       47
       47
       +
       const reactSharedInternals = (React as any)

     

       48
       48
       +
         .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

     

       49
       49
       +
       

     

       50
       50
       +
       export function deferDispatch<Dispatch extends React.Dispatch<any>>(

     

       51
       51
       +
         setState: Dispatch,

     

       52
       52
       +
         value: Dispatch extends React.Dispatch<infer State> ? State : void

     

       53
       53
       +
       ) {

     

       54
       54
       +
         if (

     

       55
       55
       +
           process.env.NODE_ENV !== 'production' &&

     

       56
       56
       +
           !!reactSharedInternals &&

     

       57
       57
       +
           !!reactSharedInternals.ReactCurrentOwner &&

     

       58
       58
       +
           !!reactSharedInternals.ReactCurrentOwner.current

     

       59
       59
       +
         ) {

     

       60
       60
       +
           Promise.resolve(value).then(setState);

     

       61
       61
       +
         } else {

     

       62
       62
       +
           setState(value);

     

       63
       63
       +
         }

     

       64
       64
       +
       }

+3 -3

packages/react-urql/src/hooks/useMutation.ts

···

       13
       13
        
       } from '@urql/core';

     

       14
       14
        
       

     

       15
       15
        
       import { useClient } from '../context';

     

       16
       16
       -
       import { initialState } from './state';

     

       16
       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
       158
       -
             setState({ ...initialState, fetching: true });

     

       158
       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
       168
       -
                 setState({

     

       168
       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

···

       17
       17
        
       import { useClient } from '../context';

     

       18
       18
        
       import { useRequest } from './useRequest';

     

       19
       19
        
       import { getCacheForClient } from './cache';

     

       20
       20
       -
       import { initialState, computeNextState, hasDepsChanged } from './state';

     

       20
       20
       +
       

     

       21
       21
       +
       import {

     

       22
       22
       +
         deferDispatch,

     

       23
       23
       +
         initialState,

     

       24
       24
       +
         computeNextState,

     

       25
       25
       +
         hasDepsChanged,

     

       26
       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
       320
       -
             setState(state => {

     

       326
       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
       356
       -
             setState(state => {

     

       362
       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

···

       13
       13
        
       

     

       14
       14
        
       import { useClient } from '../context';

     

       15
       15
        
       import { useRequest } from './useRequest';

     

       16
       16
       -
       import { initialState, computeNextState, hasDepsChanged } from './state';

     

       16
       16
       +
       

     

       17
       17
       +
       import {

     

       18
       18
       +
         deferDispatch,

     

       19
       19
       +
         initialState,

     

       20
       20
       +
         computeNextState,

     

       21
       21
       +
         hasDepsChanged,

     

       22
       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
       260
       -
             setState(state => {

     

       266
       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
       295
       -
             setState(state => [source, state[1], deps]);

     

       301
       301
       +
             deferDispatch(setState, state => [source, state[1], deps]);

     

       296
       302
        
           },

     

       297
       303
        
           [client, args.context, request]

     

       298
       304
        
         );