logaretm / villus

🏎 A tiny and fast GraphQL client for Vue.js

Home Page:https://villus.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Typing executeQuery/executeMutation when used in a different context

Subwaytime opened this issue · comments

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?