Skip to content

Support Vue 3.3 app.runWithContext to "just" use useQuery/useMutation in vue-router, pinia, etc #1505

Closed
@kevinvalk

Description

@kevinvalk

Is your feature request related to a problem? Please describe.
When using Vue 3.3 we now have the ability to use https://vuejs.org/api/application.html#app-runwithcontext. This is awesome as in vue-router, pinia, etc you can use inject calls without needing to think hard about how things fit together. In other words, there is an active appContext but not an active current instance.

Sadly, currently vue-apollo checks for active instance to see if it even should try an inject or not, which in the cases of vue-router or pinia will fail.

if (!getCurrentInstance()) {
resolveImpl = (id?: ClientId) => {
if (id) {
return resolveClientWithId(savedCurrentClients, id)
}
return resolveDefaultClient(savedCurrentClients, savedCurrentClients.default)
}
} else {

Describe the solution you'd like
I would like to be able to "just" use useQuery (etc) within a defineStore or a navigation guard so for example in a store you could do:

import { useQuery } from '@vue/apollo-composable';
import { defineStore } from 'pinia';

export const usePassportStore = defineStore('passport', () => {
  const query = useQuery(SomeDocument);

  return { data: query.result };
});

Describe alternatives you've considered
You can "fake" this behavior by using provideApolloClient but this just causes mental overhead for writer and reader of the code.

import { DefaultApolloClient, provideApolloClient, useQuery } from '@vue/apollo-composable';
import { defineStore } from 'pinia';

export const usePassportStore = defineStore('passport', () => {
  const client = inject<Parameters<typeof provideApolloClient>[0]>(DefaultApolloClient);
  if (client === undefined) {
    throw Error('should not happen');
  }
  const query = provideApolloClient(client)(() => useQuery(SomeDocument));

  return { data: query.result };
});

Additional context
N/A

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions