docs: Add example for Apollo GraphQL + composition API

Author: agualis

compatibility-scripts/vue-apollo-patch.js

@@ -0,0 +1,30 @@
+// This patch is run from post-install script and it is a temporary hack until a pending PR is merged
+// More details here: 
+// https://github.com/vuejs/vue-apollo/issues/1011
+
+const fs = require('fs')
+const path = require('path')
+
+const loadTrackingPath = path.resolve(
+  __dirname,
+  '../node_modules/@vue/apollo-composable/dist/util/loadingTracking.js'
+)
+
+fs.writeFileSync(
+  loadTrackingPath,
+  fs.readFileSync(loadTrackingPath, 'utf8').replace(/\.\$root/m, '.root')
+)
+
+const useQueryPath = path.resolve(
+  __dirname,
+  '../node_modules/@vue/apollo-composable/dist/useQuery.js'
+)
+
+fs.writeFileSync(
+  useQueryPath,
+  fs
+    .readFileSync(useQueryPath, 'utf8')
+    .replace(/(^.*onServerPrefetch)/m, '$1=()=>{}; $1')
+    .replace(/(.* require\("vue"\);)/m, '')
+    .replace(/^.*(nextTick)/m, 'vue_demi_1.$1')
+)

package.json

@@ -11,7 +11,8 @@
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
-    "setup": "npm install && npm run validate -s"
+    "setup": "npm install && npm run validate -s",
+    "postinstall": "node compatibility-scripts/vue-apollo-patch.js"
   },
   "engines": {
     "node": ">10.18"
@@ -52,14 +53,15 @@
     "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
+    "@apollo/client": "3.2.3",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/user-event": "^12.4.0",
     "@types/estree": "0.0.45",
+    "@vue/apollo-composable": "4.0.0-alpha.10",
     "@vue/compiler-sfc": "^3.0.4",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
     "axios": "^0.20.0",
     "dtslint": "^4.0.6",
     "element-plus": "^1.0.1-beta.7",
@@ -81,8 +83,8 @@
     "vuex": "^4.0.0-rc.2"
   },
   "peerDependencies": {
-    "vue": ">= 3",
-    "@vue/compiler-sfc": ">= 3"
+    "@vue/compiler-sfc": ">= 3",
+    "vue": ">= 3"
   },
   "husky": {
     "hooks": {

src/__tests__/components/VueApollo.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <div v-if="$apollo.queries.user.loading">Loading</div>
+    <div v-if="loading">Loading</div> 
+
     <div v-if="user">
       <div>Email: {{ user.email }}</div>
       <form @submit.prevent="updateUser">
@@ -15,47 +16,43 @@
 </template>
 
 <script>
-import {userQuery, updateUserMutation} from './VueApollo/queries'
+import { reactive, ref } from 'vue'
+import { useQuery, useMutation, useResult } from "@vue/apollo-composable";
+import {updateUserMutation, getUserQuery} from './VueApollo/queries'
+import {gql} from 'apollo-boost'
+
 
 export default {
-  apollo: {
-    user: {
-      query: userQuery,
-      variables() {
-        return {id: this.id}
-      },
-    },
-  },
   props: {
     id: {
       type: String,
       required: true,
     },
   },
-  data() {
+  setup(props) {
+    const email = ref('')
+      
+    const { result, loading, error } = useQuery(getUserQuery, {id: props.id})
+    const user = useResult(result, null, data => data.user)
+
+    const {mutate: updateUser} = useMutation(updateUserMutation, 
+        ()=> ({variables: 
+          {
+            input: {
+              email: email.value,
+              id: props.id,
+            },
+          }
+        })
+    )
+
     return {
-      user: null,
-      email: '',
+      email,
+      user,
+      loading,
+      error,
+      updateUser,
     }
   },
-  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/queries.js

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

src/__tests__/vue-apollo.js

@@ -1,75 +1,104 @@
-test.todo('Your test suite must contain at least one test.')
-// import '@testing-library/jest-dom'
-// import fetch from 'isomorphic-unfetch'
-// import {render, fireEvent, screen} from '..'
-// import VueApollo from 'vue-apollo'
-// import {InMemoryCache} from 'apollo-cache-inmemory'
-// import ApolloClient from 'apollo-boost'
-
-// // Since vue-apollo doesn't provides a MockProvider for Vue,
-// // you need to use some kind of mocks for the queries.
-
-// // We recommend using Mock Service Worker library to declaratively mock API communication
-// // in your tests instead of stubbing window.fetch, or relying on third-party adapters.
-
-// import {setupServer} from 'msw/node'
-// import {graphql} from 'msw'
-
-// import Component from './components/VueApollo.vue'
-
-// const apolloClient = new ApolloClient({
-//   uri: 'http://localhost:3020/graphql',
-//   cache: new InMemoryCache({
-//     addTypename: false,
-//   }),
-//   fetch,
-// })
-
-// const server = setupServer(
-//   ...[
-//     graphql.mutation('updateUser', (req, res, ctx) => {
-//       const {variables} = req
-
-//       return res(
-//         ctx.data({
-//           updateUser: {id: variables.input.id, email: variables.input.email},
-//         }),
-//       )
-//     }),
-//     graphql.query('User', (req, res, ctx) => {
-//       return res(ctx.data({user: {id: '1', email: 'alice@example.com'}}))
-//     }),
-//   ],
-// )
-
-// beforeAll(() => server.listen())
-// afterEach(() => server.resetHandlers())
-// afterAll(() => server.close())
-
-// test('mocking queries and mutations', async () => {
-//   render(Component, {props: {id: '1'}}, localVue => {
-//     localVue.use(VueApollo)
-
-//     return {
-//       apolloProvider: new VueApollo({defaultClient: apolloClient}),
-//     }
-//   })
-
-//   //Initial rendering will be in the loading state,
-//   expect(screen.getByText('Loading')).toBeInTheDocument()
-
-//   expect(
-//     await screen.findByText('Email: alice@example.com'),
-//   ).toBeInTheDocument()
-
-//   await fireEvent.update(
-//     screen.getByLabelText('Email'),
-//     'alice+new@example.com',
-//   )
-
-//   await fireEvent.click(screen.getByRole('button', {name: 'Change email'}))
-
-//   expect(
-//     await screen.findByText('Email: alice+new@example.com'),
-//   ).toBeInTheDocument()
-// })
+import '@testing-library/jest-dom'
+import fetch from 'isomorphic-unfetch'
+import {render, fireEvent, screen} from '..'
+import { DefaultApolloClient } from '@vue/apollo-composable'
+import ApolloClient from 'apollo-boost'
+import {setupServer} from 'msw/node'
+import {graphql} from 'msw'
+import { provide, h } from 'vue'
+import Component from './components/VueApollo.vue'
+
+// Since vue-apollo doesn't provide a MockProvider for Vue,
+// you need to use some kind of mocks for the queries.
+
+// We are using Mock Service Worker (aka MSW) library to declaratively mock API communication
+// in your tests instead of stubbing window.fetch, or relying on third-party adapters.
+
+const server = setupServer(
+  ...[
+    graphql.query('getUser', (req, res, ctx) => {
+      const {variables} = req
+
+      if (variables.id !== '1') {
+        return res(
+          ctx.errors([
+            {
+              message: 'User not found',
+            },
+          ]),
+        )
+      }
+
+      return res(
+        ctx.data({
+          user: 
+            {
+              id: 1,
+              email: 'alice@example.com',
+              __typename: 'User'
+            },
+        }),
+      )
+    }),
+
+    graphql.mutation('updateUser', (req, res, ctx) => {
+      const {variables} = req
+
+      return res(
+        ctx.data({
+          updateUser: {
+            id: variables.input.id, 
+            email: variables.input.email,
+            __typename: 'User'
+          },
+        }),
+        )
+      }),
+
+  ],
+)
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())
+
+const apolloClient = new ApolloClient({
+    uri: "http://localhost:3000",
+    fetch,
+})
+
+const ComponentWithInjectedApollo = {
+  // It would be preferable to use global.provide when we pass options to VTU options
+  // to testing library render function but that option is not yet supported by VTU
+  setup () {
+    provide(DefaultApolloClient, apolloClient)
+  },
+  render() {
+    return h(Component)
+  }
+}
+
+test('mocking queries and mutations', async () => {
+
+  render(ComponentWithInjectedApollo, {
+      props: {id: '1'}
+  })
+
+  //Initial rendering will be in the loading state,
+  expect(screen.getByText('Loading')).toBeInTheDocument()
+
+  expect(
+    await screen.findByText('Email: alice@example.com')
+  ).toBeInTheDocument()
+
+  await fireEvent.update(
+    screen.getByLabelText('Email'),
+    'alice+new@example.com',
+  )
+
+  await fireEvent.click(screen.getByRole('button', {name: 'Change email'}))
+
+  expect(
+     await screen.findByText('Email: alice+new@example.com'),
+  ).toBeInTheDocument()
+})