logaretm / villus

🏎 A tiny and fast GraphQL client for Vue.js
https://villus.dev
MIT License
790 stars 31 forks source link

Typing executeQuery/executeMutation when used in a different context #193

Closed Subwaytime closed 1 year ago

Subwaytime commented 1 year ago

Hey there! Currently i am using villus in a bunch of typescript projects and unfortunately i cant seem to get the typing right for this syntax sugar part that i wanted to achieve!

export const api = {
    get: (options: any) => villus.executeQuery({ ...options }),
    post: (options: any) => villus.executeMutation({ ...options }),
};

Using Typed Document Nodes generated by Codegen. Note: logout here is used inside pinia

async function logout() {
    const response = await api.post({ query: LogoutDocument });
    return response;
}

Basically the issue here is that response.data or the options will not be typed at all and it will only throw back any, null or unknown.

Tried this typing approach and then applying to the api (get/post) , which works, but as TData and TVars arent properly filled, it will always throw back any on response or endup with NonNullable<TData>

type TypeOfClassMethod<T, M extends keyof T> = T[M] extends Function ? T[M] : never;
type Query = Parameters<TypeOfClassMethod<Client, 'executeQuery'>>[0]['query'];
type QueryVariables = Parameters<TypeOfClassMethod<Client, 'executeQuery'>>[0]['variables'];
type Mutation = Parameters<TypeOfClassMethod<Client, 'executeMutation'>>[0]['query'];

as well as this one here, which gives me proper typing but of course doesn't work in the class context

export const api = {
  get: villus.executeQuery,
  post: villus.executeMutation,
};

Is there a way to get the typing done the same way as executeQuery and executeMutation?