feat: add @vue/apollo example implementation

examples/vue-apollo/nuxt.config.js

@@ -0,0 +1,13 @@
+export default {
+  alias: {
+    '@apollo/client/core': require.resolve('@apollo/client/core/index.js'),
+    '@apollo/client': require.resolve('@apollo/client/index.js')
+  },
+  build: {
+    transpile: [
+      '@vue/apollo-composable',
+      '@apollo/client',
+      'tslib'
+    ]
+  }
+}

examples/vue-apollo/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "example-vue-apollo",
+  "dependencies": {
+    "apollo-server-express": "^2.25.1"
+  },
+  "devDependencies": {
+    "@apollo/client": "^3.3.14",
+    "@vue/apollo-composable": "^4.0.0-alpha.12",
+    "graphql": "^15.5.0",
+    "graphql-tag": "^2.11.0",
+    "nuxt3": "latest"
+  },
+  "scripts": {
+    "dev": "nu dev"
+  }
+}

examples/vue-apollo/pages/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div v-for="user in users" :key="user.id">
+      {{ user.firstname }} {{ user.lastname }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineNuxtComponent } from '@nuxt/app'
+import { gql } from 'graphql-tag'
+import { useQuery, useResult } from '@vue/apollo-composable/dist'
+
+export default defineNuxtComponent({
+  setup () {
+    const { result } = useQuery(gql`
+      query getUsers {
+        users {
+          id
+          firstname
+          lastname
+          email
+        }
+      }
+    `)
+    const users = useResult(result)
+
+    return { users }
+  }
+})
+</script>

examples/vue-apollo/plugins/apollo.js

@@ -0,0 +1,16 @@
+import { DefaultApolloClient } from '@vue/apollo-composable/dist'
+
+import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
+
+export default ({ app }) => {
+  const httpLink = createHttpLink({
+    uri: '/api/graphql'
+  })
+  const cache = new InMemoryCache()
+  const apolloClient = new ApolloClient({
+    link: httpLink,
+    cache
+  })
+  // https://v3.vuejs.org/api/application-api.html#provide
+  app.provide(DefaultApolloClient, apolloClient)
+}

examples/vue-apollo/server/api/graphql.js

@@ -0,0 +1,46 @@
+import { ApolloServer, gql } from 'apollo-server-express'
+
+// Construct a schema, using GraphQL schema language
+const typeDefs = gql`
+  type Query {
+    users: [User!]
+  }
+  type User {
+    id: ID!
+    firstname: String
+    lastname: String
+    email: String
+  }
+`
+
+// Provide resolver functions for your schema fields
+const resolvers = {
+  Query: {
+    users: () => [
+      { id: 1, firstname: 'John', lastname: 'Smith', email: 'john@smith.com' },
+      { id: 2, firstname: 'Lucy', lastname: 'Aronson', email: 'lucy@aronson.net' }
+    ]
+  }
+}
+
+const server = new ApolloServer({
+  typeDefs,
+  resolvers,
+  introspection: true,
+  tracing: true,
+  playground: {
+    settings: {
+      'editor.theme': 'light',
+      'tracing.hideTracingResponse': false
+    },
+    tabs: [
+      {
+        name: 'Test',
+        endpoint: '/api/graphql',
+        query: 'query {\n  users \n}'
+      }
+    ]
+  }
+})
+
+export default server.getMiddleware({ path: '/' })