If you install this plugin, a short alias tsgql is also available instead of ts-graphql-plugin.
Available commands are typegen, extract, validate and report. If you want more detail, runts-graphql-plugin --helports-graphql-plugin <command> --help in your console.
typegen command
Generate TypeScript types from GraphQL operations or fragments in your .ts source files. Here is an output example.
extract command
Extracts GraphQL operations and fragments from ts files and writes them to manifest.json.
validate command
Validates your GraphQL operations and fragments in your ts files and report syntax or semantic errors.
report command
Extracts GraphQL operations and fragments from ts files and report them to a Markdown file. Here is an output example.
Plugin options
Pass plugin options to your tsconfig.json to configure this plugin.
If you need to use more complex logic like fetch bearer token using client secret then you can build your http schema configuration using javascript. First, you need to setup your plugin configuration like below:
It's optional. When it's set, this plugin works only if the target template string is tagged by a function whose name is equal to this parameter.
If not set, this plugin treats all template strings in your .ts as GraphQL query.
For example:
importgqlfrom'graphql-tag';// when tag paramter is 'gql'conststr1=gql`query { }`;// workconststr2=`<div></div>`;// don't workconststr3=otherTagFn`foooo`;// don't work
It's useful to write multiple kinds template strings(e.g. one is Angular Component template, another is Apollo GraphQL query).
localSchemaExtensions
It's optional. If you want to extend server-side schema, derived from schema option, you can set path of SDL file of your local extension.
The addons property accepts an array of strings. And each string should point Node.js module which implements TypeGenAddonFactory interface. You can pass not only ".js" files but also ".ts" files.
When enabled generated files export a type based on TypedQueryDocumentNode from GraphQL. The type extends the standard DocumentNode AST type but also includes types for result data and variables as type arguments.
To use this feature you can apply a type assertion to gql template tag expressions that evaluate to a DocumentNode value.
For example:
constquery=gql` query MyQuery($take: Int!) { recipes(take: $take) { id title } }`asimport('./__generated__/my-query.ts').MyQueryDocument;
With that type assertion in place result data and variable types will automatically flow through any function that accepts the TypedQueryDocumentNode type.
For example here is how you can write a wrapper for the useQuery function from Apollo Client:
import{gql,QueryHookOptions,QueryResult,useQuery}from'@apollo/client';import{TypedQueryDocumentNode}from'graphql';functionuseTypedQuery<ResponseData,Variables>(query: TypedQueryDocumentNode<ResponseData,Variables>,options: QueryHookOptions<ResponseData,Variables>,): QueryResult<ResponseData,Variables>{returnuseQuery(query,options);}// example usageconst{ data }=useTypedQuery(query,{variables: {take: 100}});// ^ ^// inferred type is `MyQuery` |// |// inferred type is `MyQueryVariables`
The result is that generated types are associated with queries at the point where the query is defined instead of at the points where the query is executed.
webpack custom transformer
ts-graphql-plugin provides TypeScript custom transformer to static transform from query template strings to GraphQL AST. It's useful if you use https://github.com/apollographql/graphql-tag
NOTE: For now, this plugin transforms nothing when webpack's --mode option is development and webpack runs with --watch option.
webpack plugin options
tsconfigPath optional
Set your project tsconfig json's file path. Default value: tsconfig.json.
Transformer options
removeFragmentDefinitions optional
Default: true. If set, the transformer transforms template strings which include only GraphQL fragment definitions to empty string literal.
For example, we finally does not need the GraphQL AST document of fragment. We need interpolated GraphQL query AST for query. So this transformer statically resolves ${fragment} interpolation and removes right-hand-side of the fragment variable.
constfragment=gql` fragment MyFragment on Query { hello }`;constquery=gql`${fragment} query MyQuery { ...MyFragment }`;
请发表评论