diff --git a/packages/test-e2e-composable-vue3/server.js b/packages/test-e2e-composable-vue3/server.js
index f04c0ca..1bea5f7 100644
--- a/packages/test-e2e-composable-vue3/server.js
+++ b/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),
},
diff --git a/packages/test-e2e-composable-vue3/src/components/NoSetupQuery.vue b/packages/test-e2e-composable-vue3/src/components/NoSetupQuery.vue
new file mode 100644
index 0000000..1654ea5
--- /dev/null
+++ b/packages/test-e2e-composable-vue3/src/components/NoSetupQuery.vue
@@ -0,0 +1,29 @@
+
+
+
+
+ {{ hello }}
+
+
diff --git a/packages/test-e2e-composable-vue3/src/router.ts b/packages/test-e2e-composable-vue3/src/router.ts
index cb48c0f..88587da 100644
--- a/packages/test-e2e-composable-vue3/src/router.ts
+++ b/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,
+ },
],
})
diff --git a/packages/test-e2e-composable-vue3/tests/e2e/specs/test.js b/packages/test-e2e-composable-vue3/tests/e2e/specs/test.js
index e879461..2e1998c 100644
--- a/packages/test-e2e-composable-vue3/tests/e2e/specs/test.js
+++ b/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!')
+ })
})
diff --git a/packages/vue-apollo-composable/src/useApolloClient.ts b/packages/vue-apollo-composable/src/useApolloClient.ts
index 7d44c05..617e7c1 100644
--- a/packages/vue-apollo-composable/src/useApolloClient.ts
+++ b/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(providedApolloClients: ClientDict, clientId:
}
export function useApolloClient(clientId?: ClientId): UseApolloClientReturn {
+ if (!getCurrentInstance()) {
+ return {
+ resolveClient: () => currentApolloClient,
+ get client () { return currentApolloClient }
+ }
+ }
+
const providedApolloClients: ClientDict = inject(ApolloClients, null)
const providedApolloClient: ApolloClient = inject(DefaultApolloClient, null)
@@ -58,8 +65,9 @@ let currentApolloClient: ApolloClient
export function provideApolloClient(client: ApolloClient) {
currentApolloClient = client
- return (fn: Function) => {
- fn()
+ return function (fn: () => TFnResult) {
+ const result = fn()
currentApolloClient = null
+ return result
}
}
diff --git a/packages/vue-apollo-composable/src/useQuery.ts b/packages/vue-apollo-composable/src/useQuery.ts
index e228506..f62c505 100644
--- a/packages/vue-apollo-composable/src/useQuery.ts
+++ b/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()
// SSR
@@ -474,7 +474,7 @@ export function useQuery<
})
// Teardown
- onBeforeUnmount(() => {
+ vm && onBeforeUnmount(() => {
stop()
subscribeToMoreItems.length = 0
})