nuxt-modules / apollo

Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL.
https://apollo.nuxtjs.org
MIT License
956 stars 198 forks source link

useAsyncQuery clientId parameter doesn't work #455

Closed artm4r closed 8 months ago

artm4r commented 1 year ago

Environment

Describe the bug

useAsyncQuery(GetComentsForHome, 'reviews') uses the 'default ' client even though I specified a different client. useQuery(GetComentsForHome, { clientId: 'reviews' }) works fine.

Expected behaviour

I expect module to use specified client instead of default

Reproduction

No response

Additional context

No response

Logs

No response

artm4r commented 1 year ago

const { data } = await useAsyncQuery({ query: GetComentsForHome, clientId: 'reviews', }) this syntax works, but this solution is not quite obvious

lewebsimple commented 1 year ago

I can confirm this, as I'm getting the same behaviour !

slavanossar commented 1 year ago

Was also experiencing this, looking at the typings shows the different ways to pass parameters to useAsyncQuery

type TQuery<T> = QueryOptions<OperationVariables, T>['query'];
type TVariables<T> = QueryOptions<OperationVariables, T>['variables'];
type TAsyncQuery<T> = {
    query: TQuery<T>;
    variables?: TVariables<T>;
    key?: string;
    cache?: boolean;
    clientId?: string;
};
export declare function useAsyncQuery<T>(opts: TAsyncQuery<T>): AsyncData<T, Error>;
export declare function useAsyncQuery<T>(query: TQuery<T>, clientId?: string): AsyncData<T, Error>;
export declare function useAsyncQuery<T>(query: TQuery<T>, variables?: TVariables<T>, clientId?: string): AsyncData<T, Error>;

So for the following

const { data } = useAsyncQuery<MyQueryType>(
  MyQueryDocument,
  {
    someVariable: 'abc',
  },
  'myApolloClient'
)

you can rewrite it as

const { data } = useAsyncQuery<MyQueryType>({
  query: MyQueryDocument,
  variables: {
    someVariable: 'abc',
  },
  clientId: 'myApolloClient'
})

and it will work correctly.