logaretm / villus

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

gql.tada / TadaDocumentNode types are not automatically infered #207

Open Subwaytime opened 4 months ago

Subwaytime commented 4 months ago

Essentially when using useQuery or useMutation, any query/mutation type does not get infered for the data object.

import { graphql } from 'gql.tada';
import { useQuery } from 'villus';

const getBooksQuery = graphql(`
  query GetBooks {
    books {
      id
      title
    }
  }
`);

const { data, error } = useQuery({
  query: getBooksQuery
});

data // globalThis.Ref<any>

This can be fixed if we provide the types directly

import { graphql } from 'gql.tada';
import { useQuery } from 'villus';

const getBooksQuery = graphql(`
  query GetBooks {
    books {
      id
      title
    }
  }
`);

const { data, error } = useQuery<typeof getBooksQuery>({
  query: getBooksQuery
});

However it would be great if these are automatically set, similiar to https://villus.logaretm.com/guide/typescript-codgen/#using-typed-document.

Not sure if this would be possible!

logaretm commented 4 months ago

They should be working as of 3.4, which version are you on?

Subwaytime commented 4 months ago
"gql.tada": "^1.3.0",
"@0no-co/graphqlsp": "^1.4.2",
"villus": "^3.4.0"

Could it be the typescript configuration? - I am also using bun, so not sure if that might be a cause..

logaretm commented 4 months ago

Create a repo where this is visible and I will take a look.

Subwaytime commented 4 months ago

Sure, will try to set something up thats similiar! Might take some time, hopefully thats okay

Subwaytime commented 4 months ago

https://github.com/Subwaytime/villus-gql-issue - I tried using executeQuery and executeMutation and it has the same result. In the tada.ts is the gql request and data is always a Ref<any>.

Note: The repo is similiar to the actual project aside from the fact that the queries and mutations are usually in an api folder instead of the store.