docs: add vue-apollo example (#143)

Author: cilice

package-lock.json

@@ -48,14 +48,20 @@
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@testing-library/jest-dom": "^5.7.0",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
     "axios": "^0.19.2",
     "eslint-plugin-vue": "^6.2.2",
+    "graphql": "^15.0.0",
+    "graphql-tag": "^2.10.3",
     "jest-serializer-vue": "^2.0.2",
     "kcd-scripts": "^5.11.1",
     "lodash.merge": "^4.6.2",
+    "mock-apollo-client": "^0.4.0",
     "portal-vue": "^2.1.7",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.11",
+    "vue-apollo": "^3.0.3",
     "vue-i18n": "^8.17.6",
     "vue-jest": "^4.0.0-beta.2",
     "vue-router": "^3.1.6",

package.json

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div v-if="$apollo.queries.user.loading">Loading</div>
+    <div v-if="user">
+      <div>Email: {{ user.email }}</div>
+      <form @submit.prevent="updateUser">
+        <div>
+          <label for="email-input">Email</label>
+          <input id="email-input" v-model="email" type="email" />
+        </div>
+        <button type="submit">Change email</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import {userQuery, updateUserMutation} from './VueApollo/queries'
+
+export default {
+  apollo: {
+    user: {
+      query: userQuery,
+      variables() {
+        return {id: this.id}
+      },
+    },
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      user: null,
+      email: '',
+    }
+  },
+  methods: {
+    async updateUser() {
+      const {
+        data: {
+          updateUser: {email},
+        },
+      } = await this.$apollo.mutate({
+        mutation: updateUserMutation,
+        variables: {
+          input: {
+            email: this.email,
+            id: this.id,
+          },
+        },
+      })
+
+      this.user.email = email
+    },
+  },
+}
+</script>

src/__tests__/components/VueApollo.vue

@@ -0,0 +1,19 @@
+import gql from 'graphql-tag'
+
+export const updateUserMutation = gql`
+  mutation updateUser($data: UpdateUserInput) {
+    updateUser(input: $data) {
+      id
+      email
+    }
+  }
+`
+
+export const userQuery = gql`
+  query User($id: String!) {
+    user(id: $id) {
+      id
+      email
+    }
+  }
+`