Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor(bindings): Allow hasNext mutation results to update repeatedly (#3103)

authored by

Phil Pluckthun and committed by
GitHub
d0d06944 651df41e

+53 -42
+8
.changeset/mighty-nails-learn.md
··· 1 + --- 2 + '@urql/preact': minor 3 + '@urql/svelte': minor 4 + 'urql': minor 5 + '@urql/vue': minor 6 + --- 7 + 8 + Allow mutations to update their results in bindings when `hasNext: true` is set, which indicates deferred or streamed results.
+16 -15
packages/preact-urql/src/hooks/useMutation.ts
··· 1 1 import { useState, useCallback, useRef, useEffect } from 'preact/hooks'; 2 - import { pipe, toPromise } from 'wonka'; 2 + import { pipe, onPush, filter, toPromise, take } from 'wonka'; 3 3 4 4 import { 5 5 AnyVariables, ··· 153 153 const executeMutation = useCallback( 154 154 (variables: Variables, context?: Partial<OperationContext>) => { 155 155 setState({ ...initialState, fetching: true }); 156 - 157 156 return pipe( 158 157 client.executeMutation<Data, Variables>( 159 158 createRequest<Data, Variables>(query, variables), 160 159 context || {} 161 160 ), 161 + onPush(result => { 162 + if (isMounted.current) { 163 + setState({ 164 + fetching: false, 165 + stale: result.stale, 166 + data: result.data, 167 + error: result.error, 168 + extensions: result.extensions, 169 + operation: result.operation, 170 + }); 171 + } 172 + }), 173 + filter(result => !result.hasNext), 174 + take(1), 162 175 toPromise 163 - ).then(result => { 164 - if (isMounted.current) { 165 - setState({ 166 - fetching: false, 167 - stale: !!result.stale, 168 - data: result.data, 169 - error: result.error, 170 - extensions: result.extensions, 171 - operation: result.operation, 172 - }); 173 - } 174 - return result; 175 - }); 176 + ); 176 177 }, 177 178 // eslint-disable-next-line react-hooks/exhaustive-deps 178 179 [client, query, setState]
+16 -15
packages/react-urql/src/hooks/useMutation.ts
··· 1 1 import { useState, useCallback, useRef, useEffect } from 'react'; 2 - import { pipe, toPromise } from 'wonka'; 2 + import { pipe, onPush, filter, toPromise, take } from 'wonka'; 3 3 4 4 import { 5 5 AnyVariables, ··· 153 153 const executeMutation = useCallback( 154 154 (variables: Variables, context?: Partial<OperationContext>) => { 155 155 deferDispatch(setState, { ...initialState, fetching: true }); 156 - 157 156 return pipe( 158 157 client.executeMutation<Data, Variables>( 159 158 createRequest<Data, Variables>(query, variables), 160 159 context || {} 161 160 ), 161 + onPush(result => { 162 + if (isMounted.current) { 163 + deferDispatch(setState, { 164 + fetching: false, 165 + stale: result.stale, 166 + data: result.data, 167 + error: result.error, 168 + extensions: result.extensions, 169 + operation: result.operation, 170 + }); 171 + } 172 + }), 173 + filter(result => !result.hasNext), 174 + take(1), 162 175 toPromise 163 - ).then(result => { 164 - if (isMounted.current) { 165 - deferDispatch(setState, { 166 - fetching: false, 167 - stale: !!result.stale, 168 - data: result.data, 169 - error: result.error, 170 - extensions: result.extensions, 171 - operation: result.operation, 172 - }); 173 - } 174 - return result; 175 - }); 176 + ); 176 177 }, 177 178 // eslint-disable-next-line react-hooks/exhaustive-deps 178 179 [client, query, setState]
+1 -1
packages/svelte-urql/src/mutationStore.ts
··· 112 112 args.client.executeRequestOperation(operation), 113 113 map(({ stale, data, error, extensions, operation }) => ({ 114 114 fetching: false, 115 - stale: !!stale, 115 + stale, 116 116 data, 117 117 error, 118 118 operation,
+1 -1
packages/vue-urql/src/useMutation.test.ts
··· 58 58 59 59 expect(clientMutation).toHaveBeenCalledTimes(1); 60 60 61 - subject.next({ data: { test: true } }); 61 + subject.next({ data: { test: true }, stale: false }); 62 62 await promise.then(function () { 63 63 expect(mutation.fetching).toBe(false); 64 64 expect(mutation.stale).toBe(false);
+11 -10
packages/vue-urql/src/useMutation.ts
··· 2 2 3 3 import { ref, Ref } from 'vue'; 4 4 import { DocumentNode } from 'graphql'; 5 - import { pipe, toPromise, take } from 'wonka'; 5 + import { pipe, onPush, filter, toPromise, take } from 'wonka'; 6 6 7 7 import { 8 8 Client, ··· 158 158 createRequest<T, V>(query, unwrapPossibleProxy(variables)), 159 159 context || {} 160 160 ), 161 + onPush(result => { 162 + data.value = result.data; 163 + stale.value = result.stale; 164 + fetching.value = false; 165 + error.value = result.error; 166 + operation.value = result.operation; 167 + extensions.value = result.extensions; 168 + }), 169 + filter(result => !result.hasNext), 161 170 take(1), 162 171 toPromise 163 - ).then((res: OperationResult<T, V>) => { 164 - data.value = res.data; 165 - stale.value = !!res.stale; 166 - fetching.value = false; 167 - error.value = res.error; 168 - operation.value = res.operation; 169 - extensions.value = res.extensions; 170 - return res; 171 - }); 172 + ); 172 173 }, 173 174 }; 174 175 }