feat: allow using useQuery outside of setup, closes #1020

packages/test-e2e-composable-vue3/server.js

@@ -17,6 +17,7 @@ type Message {
 }
 
 type Query {
+  hello: String!
   channels: [Channel!]!
   channel (id: ID!): Channel
 }
@@ -66,6 +67,7 @@ resetDatabase()
 
 const resolvers = {
   Query: {
+    hello: () => 'Hello world!',
     channels: () => channels,
     channel: (root, { id }) => channels.find(c => c.id === id),
   },

packages/test-e2e-composable-vue3/src/components/NoSetupQuery.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+import { apolloClient } from '@/apollo'
+import { gql } from '@apollo/client/core'
+import { provideApolloClient, useQuery, useResult } from '@vue/apollo-composable'
+import { defineComponent } from 'vue'
+
+// Global query
+
+const query = provideApolloClient(apolloClient)(() => useQuery(gql`
+  query hello {
+    hello
+  }
+`))
+const hello = useResult(query.result, [])
+
+export default defineComponent({
+  setup () {
+    return {
+      hello,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="no-setup-query">
+    {{ hello }}
+  </div>
+</template>

packages/test-e2e-composable-vue3/src/router.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Welcome from './components/Welcome.vue'
 import ChannelView from './components/ChannelView.vue'
+import NoSetupQuery from './components/NoSetupQuery.vue'
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -16,5 +17,9 @@ export const router = createRouter({
       component: ChannelView,
       props: true,
     },
+    {
+      path: '/no-setup-query',
+      component: NoSetupQuery,
+    },
   ],
 })

packages/test-e2e-composable-vue3/tests/e2e/specs/test.js

@@ -51,4 +51,9 @@ describe('Vue 3 + Apollo Composable', () => {
     cy.contains('.message', 'Message 2')
     cy.contains('.message', 'Message 3')
   })
+
+  it('supports queries outside of setup', () => {
+    cy.visit('/no-setup-query')
+    cy.contains('.no-setup-query', 'Hello world!')
+  })
 })

packages/vue-apollo-composable/src/useApolloClient.ts

@@ -1,4 +1,4 @@
-import { inject } from 'vue-demi'
+import { getCurrentInstance, inject } from 'vue-demi'
 import { ApolloClient } from '@apollo/client/core'
 
 export const DefaultApolloClient = Symbol('default-apollo-client')
@@ -34,6 +34,13 @@ function resolveClientWithId<T>(providedApolloClients: ClientDict<T>, clientId:
 }
 
 export function useApolloClient<TCacheShape = any>(clientId?: ClientId): UseApolloClientReturn<TCacheShape> {
+  if (!getCurrentInstance()) {
+    return {
+      resolveClient: () => currentApolloClient,
+      get client () { return currentApolloClient }
+    }
+  }
+
   const providedApolloClients: ClientDict<TCacheShape> = inject(ApolloClients, null)
   const providedApolloClient: ApolloClient<TCacheShape> = inject(DefaultApolloClient, null)
 
@@ -58,8 +65,9 @@ let currentApolloClient: ApolloClient<any>
 
 export function provideApolloClient<TCacheShape = any>(client: ApolloClient<TCacheShape>) {
   currentApolloClient = client
-  return (fn: Function) => {
-    fn()
+  return function <TFnResult = any> (fn: () => TFnResult) {
+    const result = fn()
     currentApolloClient = null
+    return result
   }
 }

packages/vue-apollo-composable/src/useQuery.ts

@@ -141,7 +141,7 @@ export function useQuery<
    * Indicates if a network request is pending
    */
   const loading = ref(false)
-  trackQuery(loading)
+  vm && trackQuery(loading)
   const networkStatus = ref<number>()
 
   // SSR
@@ -474,7 +474,7 @@ export function useQuery<
   })
 
   // Teardown
-  onBeforeUnmount(() => {
+  vm && onBeforeUnmount(() => {
     stop()
     subscribeToMoreItems.length = 0
   })