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 @@ + + + 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 })