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.

(vue) - use executeMutation in useMutation (#1680)

* use executeMutation in @urql/vue

* fix tests and add changeset

* use gql helper

* test

* make it work with executeMutation by adding take(1)

authored by

Jovi De Croock and committed by
GitHub
8825865d b9e173ee

+46 -29
+5
.changeset/khaki-guests-hope.md
··· 1 + --- 2 + '@urql/vue': patch 3 + --- 4 + 5 + Use client.executeMutation rather than client.mutation in useMutation
+22 -17
packages/vue-urql/src/useMutation.test.ts
··· 4 4 useClient: () => client, 5 5 })); 6 6 7 - import { makeSubject, pipe, take, toPromise } from 'wonka'; 8 - import { createClient } from '@urql/core'; 7 + import { makeSubject } from 'wonka'; 8 + import { createClient, gql } from '@urql/core'; 9 9 import { useMutation } from './useMutation'; 10 10 import { reactive } from 'vue'; 11 11 ··· 16 16 }); 17 17 18 18 describe('useMutation', () => { 19 - it('provides an execute method that resolves a promise', async () => { 19 + it('provides an execute method that resolves a promise', done => { 20 20 const subject = makeSubject<any>(); 21 21 const clientMutation = jest 22 - .spyOn(client, 'mutation') 23 - .mockImplementation((): any => ({ 24 - toPromise() { 25 - return pipe(subject.source, take(1), toPromise); 26 - }, 27 - })); 28 - const mutation = reactive(useMutation('mutation { test }')); 22 + .spyOn(client, 'executeMutation') 23 + .mockImplementation(() => subject.source); 24 + 25 + const mutation = reactive( 26 + useMutation( 27 + gql` 28 + mutation { 29 + test 30 + } 31 + ` 32 + ) 33 + ); 29 34 30 35 expect(mutation).toMatchObject({ 31 36 data: undefined, ··· 46 51 expect(clientMutation).toHaveBeenCalledTimes(1); 47 52 48 53 subject.next({ data: { test: true } }); 49 - 50 - await promise; 51 - 52 - expect(mutation.fetching).toBe(false); 53 - expect(mutation.stale).toBe(false); 54 - expect(mutation.error).toBe(undefined); 55 - expect(mutation.data).toEqual({ test: true }); 54 + promise.then(function () { 55 + expect(mutation.fetching).toBe(false); 56 + expect(mutation.stale).toBe(false); 57 + expect(mutation.error).toBe(undefined); 58 + expect(mutation.data).toEqual({ test: true }); 59 + done(); 60 + }); 56 61 }); 57 62 });
+19 -12
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 6 6 7 import { 7 8 Client, ··· 10 11 Operation, 11 12 OperationContext, 12 13 OperationResult, 14 + createRequest, 13 15 } from '@urql/core'; 14 16 15 17 import { useClient } from './useClient'; ··· 58 60 context?: Partial<OperationContext> 59 61 ): Promise<OperationResult<T, V>> { 60 62 fetching.value = true; 61 - return client 62 - .mutation(query, variables as any, context) 63 - .toPromise() 64 - .then((res: OperationResult) => { 65 - data.value = res.data; 66 - stale.value = !!res.stale; 67 - fetching.value = false; 68 - error.value = res.error; 69 - operation.value = res.operation; 70 - extensions.value = res.extensions; 71 - return res; 72 - }); 63 + 64 + return pipe( 65 + client.executeMutation<T, V>( 66 + createRequest<T, V>(query, variables), 67 + context || {} 68 + ), 69 + take(1), 70 + toPromise 71 + ).then((res: OperationResult) => { 72 + data.value = res.data; 73 + stale.value = !!res.stale; 74 + fetching.value = false; 75 + error.value = res.error; 76 + operation.value = res.operation; 77 + extensions.value = res.extensions; 78 + return res; 79 + }); 73 80 }, 74 81 }; 75 82 }