Examine the possibility to use type from queries without generation about ts-graphql-plugin HOT 6 OPEN

So I've learned that, no, TypeScript plugins cannot produce the effect of adding a type assertion to an expression. So instead, inspired by @ts-gql I made an ESLint plugin with an autofix that automatically appends type assertions to gql template tag expressions.

The plugin: @hallettj/eslint-plugin-ts-graphql

The autofix avoids the step of importing generated types myself. The @hallettj scope on the name is probably temporary; I may move the package to a more permanent name in the near future. I'm also planning a pull request for this repo to export TypedDocumentNode types from generated files to make the type assertions more compact.

from ts-graphql-plugin.

hi, thanks for reporting issue.

It’s not possible. The <mouseQuery> is wrong TypeScript generics syntax because mouseQuery is not a type but value.

And with <typeof mouseQuery> form, which has no compilation error, TypeFromQuery wouldn’t work. We need to parse body of query to get return type of the query. But TypeScript type system does not allow this.

from ts-graphql-plugin.

Hi, that was not really an issue 😄

And there is no shenanigans a typescript plugin can do about this?
Having the type from the query felt so reachable!

PS: Yeah, used wrong syntax sorry, was wavering between a generic and a function and mixed both --'

from ts-graphql-plugin.

Hey @Quramy,

Seems like it will be soon doable: https://github.com/dotansimha/graphql-typed-ast (using an alpha TS version)

How do you feel about it, is that functionality something you would like for this plugin?

Cheers

from ts-graphql-plugin.

How do you feel about it, is that functionality something you would like for this plugin?

Template literal types is very interesting feature. But I will not use this in my plugin because I think lexing / parsing queries should be responsible for graphql-js . And recursive descent parser with string type literal can exceed TypeScript's recursive type limitation.

from ts-graphql-plugin.

Is it possible for the plugin to override the type of a tagged template expression? Or to insert a type assertion? @apollo/client (and possibly other libraries) can consume a generic type called TypedDocumentNode from the package @graphql-typed-document-node/core that is defined like this:

import { DocumentNode } from 'graphql';
export interface TypedDocumentNode<Result = {
    [key: string]: any;
}, Variables = {
    [key: string]: any;
}> extends DocumentNode {
    __resultType?: Result;
    __variablesType?: Variables;
}

It would be super helpful if the plugin could replace the inferred type of mouseQuery from the example above with this type:

import { TypedDocumentNode } from "@graphql-typed-document-node/core"

const mouseQuery = gql`
  query Mouse($mouseId: String!) {
    mouse(mouseId: $mouseId) {
      name
      bio {
        full
      }
    }
  }
` as TypedDocumentNode<
  {
    mouse: {
      name: string
      bio: {
        full: string
      } | null
    } | null
  },
  {
    mouseId: string
  }
>

Passing a value with that type to, for example, useQuery would automatically hook up the correct type inference for response data, and for query variables.

Edit: I realized an as would probably be better than adding a type annotation higher in the tree.

By the way, this plugin makes me very happy! I love it!

from ts-graphql-plugin.