Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 03429fc

Browse files
authored
docs: add vue-apollo example (testing-library#143)
1 parent 7a7c0fd commit 03429fc

File tree

5 files changed

+312
-0
lines changed

5 files changed

+312
-0
lines changed

‎package-lock.json

Lines changed: 163 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,20 @@
4848
"devDependencies": {
4949
"@babel/plugin-transform-runtime": "^7.9.6",
5050
"@testing-library/jest-dom": "^5.7.0",
51+
"apollo-cache-inmemory": "^1.6.6",
52+
"apollo-client": "^2.6.10",
5153
"axios": "^0.19.2",
5254
"eslint-plugin-vue": "^6.2.2",
55+
"graphql": "^15.0.0",
56+
"graphql-tag": "^2.10.3",
5357
"jest-serializer-vue": "^2.0.2",
5458
"kcd-scripts": "^5.11.1",
5559
"lodash.merge": "^4.6.2",
60+
"mock-apollo-client": "^0.4.0",
5661
"portal-vue": "^2.1.7",
5762
"vee-validate": "^2.2.15",
5863
"vue": "^2.6.11",
64+
"vue-apollo": "^3.0.3",
5965
"vue-i18n": "^8.17.6",
6066
"vue-jest": "^4.0.0-beta.2",
6167
"vue-router": "^3.1.6",

‎src/__tests__/components/VueApollo.vue

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div>
3+
<div v-if="$apollo.queries.user.loading">Loading</div>
4+
<div v-if="user">
5+
<div>Email: {{ user.email }}</div>
6+
<form @submit.prevent="updateUser">
7+
<div>
8+
<label for="email-input">Email</label>
9+
<input id="email-input" v-model="email" type="email" />
10+
</div>
11+
<button type="submit">Change email</button>
12+
</form>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
import {userQuery, updateUserMutation} from './VueApollo/queries'
19+
20+
export default {
21+
apollo: {
22+
user: {
23+
query: userQuery,
24+
variables() {
25+
return {id: this.id}
26+
},
27+
},
28+
},
29+
props: {
30+
id: {
31+
type: String,
32+
required: true,
33+
},
34+
},
35+
data() {
36+
return {
37+
user: null,
38+
email: '',
39+
}
40+
},
41+
methods: {
42+
async updateUser() {
43+
const {
44+
data: {
45+
updateUser: {email},
46+
},
47+
} = await this.$apollo.mutate({
48+
mutation: updateUserMutation,
49+
variables: {
50+
input: {
51+
email: this.email,
52+
id: this.id,
53+
},
54+
},
55+
})
56+
57+
this.user.email = email
58+
},
59+
},
60+
}
61+
</script>
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import gql from 'graphql-tag'
2+
3+
export const updateUserMutation = gql`
4+
mutation updateUser($data: UpdateUserInput) {
5+
updateUser(input: $data) {
6+
id
7+
email
8+
}
9+
}
10+
`
11+
12+
export const userQuery = gql`
13+
query User($id: String!) {
14+
user(id: $id) {
15+
id
16+
email
17+
}
18+
}
19+
`

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /