feat: add basic support for vue options api (#575)

package.json

@@ -29,6 +29,7 @@
     "@nuxt/kit": "^3.8.2",
     "@rollup/plugin-graphql": "^2.0.4",
     "@vue/apollo-composable": "4.0.0-beta.11",
+    "@vue/apollo-option": "4.0.0-beta.9",
     "defu": "^6.1.3",
     "destr": "^2.0.2",
     "graphql": "^16.8.1",

playground/app.vue

@@ -1,57 +1,3 @@
 <template>
-  <div id="wrapper" bg-light text-dark>
-    <main p-4>
-      <div flex flex-col gap-4>
-        <NCard class="p4">
-          <div class="n-header-upper">
-            GraphQL API
-          </div>
-
-          <form class="flex gap-3 items-center">
-            <NRadio
-              v-for="entry of apis"
-              :key="entry"
-              v-model="api"
-              :name="entry"
-              :value="entry"
-              n="red6 dark:red5"
-            >
-              {{ entry }}
-            </NRadio>
-          </form>
-        </NCard>
-
-        <template v-if="api === 'github'">
-          <GithubDemo />
-        </template>
-        <template v-else-if="api === 'starlink'">
-          <StarlinkDemo />
-        </template>
-        <template v-else-if="api === 'todos'">
-          <TodosDemo />
-        </template>
-      </div>
-    </main>
-
-    <footer border-t-1 border-slate flex justify-center items-center>
-      @nuxtjs/apollo playground
-    </footer>
-  </div>
+  <NuxtPage />
 </template>
-
-<script lang="ts" setup>
-const apis = ref(['starlink', 'todos', 'github'])
-
-const apiCookie = useCookie('apollo_api', { default: () => apis.value[0] })
-const api = ref(apiCookie.value)
-watch(api, value => (apiCookie.value = value))
-</script>
-
-<style scoped>
-#wrapper {
-  min-height: 100vh;
-
-  display: grid;
-  grid-template-rows: 1fr 60px;
-}
-</style>

playground/pages/index.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+const apis = ref(['starlink', 'todos', 'github'])
+
+const apiCookie = useCookie('apollo_api', { default: () => apis.value[0] })
+const api = ref(apiCookie.value)
+watch(api, value => (apiCookie.value = value))
+</script>
+
+<template>
+  <div id="wrapper" bg-light text-dark>
+    <main p-4>
+      <div flex flex-col gap-4>
+        <NCard class="p4">
+          <div class="n-header-upper">
+            GraphQL API
+          </div>
+
+          <form class="flex gap-3 items-center">
+            <NRadio
+              v-for="entry of apis"
+              :key="entry"
+              v-model="api"
+              :name="entry"
+              :value="entry"
+              n="red6 dark:red5"
+            >
+              {{ entry }}
+            </NRadio>
+          </form>
+        </NCard>
+
+        <template v-if="api === 'github'">
+          <GithubDemo />
+        </template>
+        <template v-else-if="api === 'starlink'">
+          <StarlinkDemo />
+        </template>
+        <template v-else-if="api === 'todos'">
+          <TodosDemo />
+        </template>
+      </div>
+    </main>
+
+    <footer border-t-1 border-slate flex justify-center items-center>
+      @nuxtjs/apollo playground
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+#wrapper {
+  min-height: 100vh;
+
+  display: grid;
+  grid-template-rows: 1fr 60px;
+}
+</style>

playground/pages/options-api.vue

@@ -0,0 +1,16 @@
+<script>
+export default {
+  apollo: {
+    ships: {
+      query: gql`query ships ($limit: Int = 10) { ships(limit: $limit) { id name } }`,
+      variables: () => ({ limit: 3 })
+    }
+  }
+}
+</script>
+
+<template>
+  <pre>
+    {{ ships }}
+  </pre>
+</template>

src/runtime/plugin.ts

@@ -1,6 +1,7 @@
 import { destr } from 'destr'
 import { onError } from '@apollo/client/link/error'
 import { getMainDefinition } from '@apollo/client/utilities'
+import { createApolloProvider } from '@vue/apollo-option'
 import { ApolloClients, provideApolloClients } from '@vue/apollo-composable'
 import { ApolloClient, ApolloLink, createHttpLink, InMemoryCache, split } from '@apollo/client/core'
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
@@ -136,6 +137,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   provideApolloClients(clients)
   nuxtApp.vueApp.provide(ApolloClients, clients)
+  nuxtApp.vueApp.use(createApolloProvider({ defaultClient: clients?.default as any }))
   nuxtApp._apolloClients = clients
 
   const defaultClient = clients?.default