Examine the possibility to use type from queries without generation

[LeonardDrs]

---

name: Feature request about: Examine the possibility to use type from queries without generation title: 'Create a function/generic to return the expected result of a query' labels: 'question, feature request' assignees: ''

---Describe the feature Since typescript knows, thanks to this plugin, what are the expected key name and type of any query, could it be possible to have some sort of function or generic that would return the data from a query, without having to generate them?

It would replace:

const mouseQuery = gql`
query Mouse($mouseId: String!) {
  mouse(mouseId: $mouseId) {
    name
    bio {
      full
    }
  }
}
`
// generated types
type Mouse = {
    mouse: ({
        name: string;
        bio: ({
            full: string;
        }) | null;
    }) | null;
};
type MouseVariables = {
    mouseId: string;
};

with

// names may vary
import {
    TypeFromQuery,
    VariableTypeFromQuery
} from 'ts-graphql-plugin';

const mouseQuery = gql`
query Mouse($mouseId: String!) {
  mouse(mouseId: $mouseId) {
    name
    bio {
      full
    }
  }
}
`
type Mouse = TypeFromQuery<mouseQuery>;
type MouseVariables = VariableTypeFromQuery<mouseQuery>;

Since we can have auto-completion for queries and query type generation, what would we need to make this happen?

--

Thanks a lot for this plugin, love it!

[Quramy]

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.

[LeonardDrs]

Hi, that was not really an issue :smile:

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 --'

[LeonardDrs]

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

[Quramy]

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.

[hallettj]

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!

[hallettj]

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.