Examine the possibility to use type from queries without generation

---

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!

[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.

[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!