Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(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
+5
.changeset/khaki-guests-hope.md
+22
-17
packages/vue-urql/src/useMutation.test.ts
+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
+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
}