GraphQL Type Generator
This project aims to create a streamlined, automated process for generating TypeScript types from a GraphQL schema and creating Apollo Client hooks from GraphQL queries and mutations. This will assist developers in creating query/mutation hooks.It will also assist developers to integrate apollo graphql extension for VSCode with their project to enable the syntax suggestions for graphql queries and mutations.
Table of Contents
Prerequisites
- This extension works on vscode version 1.59.2 or above.
- This extension and this documentation assume you are already familiar with the GraphQL language. If you're not, please visit the official graphql.org website first.
The plugin works out of the box with popular GraphQL clients such as Apollo GraphQL! It also works with any other GraphQL client that uses the same syntax for queries and mutations.
Installation
Install the extension and install all the dependencies using Ctrl+Shift+P and typing GraphQL Type Generator: Install Dependencies and pressing enter.
It will take a while and will install the following dependencies:
Install apollo graphql extension for VSCode as it enables the syntax suggestions for graphql queries and mutations.
(apollo config file will be automatically generated when you run the extension for the first time)
Features
It is important to configure how the schema types are discovered. If the schema types are not discovered correctly, language features such
as completion and error highlighting will be based on the wrong type information.
Schemas and their types are declared using GraphQL Type System Definition Language, which is also widely known as GraphQL Schema Definition Language (often abbreviated as SDL). If you're authoring your schemas in SDL, the plugin provides the following features:
- Completion for types when defining fields, arguments, implemented interfaces, and so on.
- Error highlighting of schema errors such as unknown types, wrong use of types, and missing fields when implementing interfaces.
- Find usages in SDL and refactoring such as rename, which will update the relevant queries, mutations, and so on.
- Full language support for GraphQL Specification including the Schema Definition Language (SDL).
- Schema-aware completion, error highlighting, and documentation.
This extension has 5 features:
This feature will generate types for your input schema. It will generate types for all the queries and mutations in your schema. It will also generate types for all the input types in your schema. It will generate a file named types.ts in the src directory of your project. You can change the name of the file in the extension settings.
Press Ctrl+Shift+P and it will bring you directly to the editor commands. Type GraphQL Type Generator: Generate Types for your input schema" and press enter.
For the first time when you generate types, set schema path will be invoked.
This feature will generate hooks for all the documents with .gql.tsx extension in your project. It will generate a .generated.ts file which includes all the useQuery and useMutation hooks named doucumentName.gql.generated.ts in the same folder where the file is present. You can change the name of the file in the extension settings.
- option 1: Press
Ctrl+Shift+P and it will bring you directly to the editor commands. Type GraphQL Type Generator: Generate Hooks for all document and press enter.
- option 2: Right click on active editor section and select "Generate useQuery Hooks For All Files" from the context menu.
For the first time when you generate types as well as hooks, set schema path will be invoked.
This feature will generate hooks for a single document. It will generate a .generated.ts file which includes all the useQuery and useMutation hooks named doucumentName.gql.generated.ts in the same folder where the file is present. You can change the name of the file in the extension settings.
- option 1: Right click on active editor section and select "Generate useQuery Hooks For This File" from the context menu.
- option 2: Save the file and if it has a
.gql.tsx extension, it will automatically generate the hooks.
- option 3:Press
Ctrl+Shift+P and it will bring you directly to the editor commands. Type GraphQL Type Generator: Generate Hooks for a single document and press enter.
For the first time when you generate types as well as hooks, set schema path will be invoked.
This feature will generate hooks for custom documents. It will generate a .generated.ts file which includes all the useQuery and useMutation hooks named doucumentName.gql.generated.ts in the same folder where the file is present. You can change the name of the file in the extension settings.
- Right click on active editor section and select "Generate useQuery Hooks For Custom Files" from the context menu.
For the first time when you generate types as well as hooks, set schema path will be invoked.
This feature will generate apollo config file. It will be generated and processed only for the first time when the extension is initiated. It will generate a apollo.config.js file in the root directory of your project. You can change the name of the file in the extension settings.
just in case the suggestion does not work, go to apollo.config.js file and save the file again. It will rerun the apollo extension.
This feature will set the schema path for your project. You can change the name of the file in the extension settings.
Press Ctrl+Shift+P and it will bring you directly to the editor commands. Type GraphQL Type Generator: Set Schema Path and press enter.
Enter the path of your schema file or fetch link and press enter.
Example
const gql = require('graphql-tag');
const typeDefs = gql`
type Query {
"Query to get tracks array for the homepage grid"
tracksForHome: [Track!]!
}
fragment TrackFragment on Track {
id
}
"A track is a group of Modules that teaches about a specific topic"
type Track {
id: ID!
"The track's title"
title: String!
"The track's main Author"
author: Author!
"The track's illustration to display in track card or track page detail"
thumbnail: String
"The track's approximate length to complete, in minutes"
length: Int
"The number of modules this track contains"
modulesCount: Int
}
"Author of a complete Track or a Module"
type Author {
id: ID!
"Author's first and last name"
name: String!
"Author's profile picture"
photo: String
}
`;
module.exports = typeDefs;
import gql from 'apollo-client';
export const getTracksDocument = gql`
query getTracks {
tracksForHome {
id
title
thumbnail
length
modulesCount
author {
name
photo
}
}
}
`;
Generated Types
export type Maybe<T> = T | null;
export type InputMaybe<T> = Maybe<T>;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
export type MakeEmpty<T extends { [key: string]: unknown }, K extends keyof T> = { [_ in K]?: never };
export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
ID: { input: string; output: string; }
String: { input: string; output: string; }
Boolean: { input: boolean; output: boolean; }
Int: { input: number; output: number; }
Float: { input: number; output: number; }
};
/** Author of a complete Track or a Module */
export type Author = {
__typename?: 'Author';
id: Scalars['ID']['output'];
/** Author's first and last name */
name: Scalars['String']['output'];
/** Author's profile picture */
photo?: Maybe<Scalars['String']['output']>;
};
export type Query = {
__typename?: 'Query';
/** Query to get tracks array for the homepage grid */
tracksForHome: Array<Track>;
};
/** A track is a group of Modules that teaches about a specific topic */
export type Track = {
__typename?: 'Track';
/** The track's main Author */
author: Author;
id: Scalars['ID']['output'];
/** The track's approximate length to complete, in minutes */
length?: Maybe<Scalars['Int']['output']>;
/** The number of modules this track contains */
modulesCount?: Maybe<Scalars['Int']['output']>;
/** The track's illustration to display in track card or track page detail */
thumbnail?: Maybe<Scalars['String']['output']>;
/** The track's title */
title: Scalars['String']['output'];
};
Generated Hooks and mutation functions
- document.gql.generated.ts
import * as Types from '../types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type getTracksQueryVariables = Types.Exact<{ [key: string]: never; }>;
export type getTracksQuery = { tracksForHome: Array<(
Pick<Types.Track, 'id' | 'title' | 'thumbnail' | 'length' | 'modulesCount'>
& { author: Pick<Types.Author, 'name' | 'photo'> }
)> };
export const getTracksDocument = gql`
query getTracks {
tracksForHome {
id
title
thumbnail
length
modulesCount
author {
name
photo
}
}
}
`;
/**
* __usegetTracksQuery__
*
* To run a query within a React component, call `usegetTracksQuery` and pass it any options that fit your needs.
* When your component renders, `usegetTracksQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = usegetTracksQuery({
* variables: {
* },
* });
*/
export function usegetTracksQuery(baseOptions?: Apollo.QueryHookOptions<getTracksQuery, getTracksQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<getTracksQuery, getTracksQueryVariables>(getTracksDocument, options);
}
export function usegetTracksLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<getTracksQuery, getTracksQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<getTracksQuery, getTracksQueryVariables>(getTracksDocument, options);
}
export type getTracksQueryHookResult = ReturnType<typeof usegetTracksQuery>;
export type getTracksLazyQueryHookResult = ReturnType<typeof usegetTracksLazyQuery>;
export type getTracksQueryResult = Apollo.QueryResult<getTracksQuery, getTracksQueryVariables>;
Generated apollo.config.js
module.exports = {
client: {
service: {
name: "my-service-name",
url: "http://localhost:4000/",
},
excludes: ["**/__tests__/**","**/*.generated.ts"]
},
};
Extension Settings
Include if your extension adds any VS Code settings through the contributes.configuration extension point.
For example:
This extension contributes the following settings:
myExtension.enable: Enable/disable this extension.myExtension.thing: Set to blah to do something.
Known Issues
Calling out known issues can help limit users opening duplicate issues against your extension.
Release Notes
Users appreciate release notes as you update your extension.
1.0.0
Initial release of ...
1.0.1
Fixed issue #.
1.1.0
Added features X, Y, and Z.
Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
- Split the editor (
Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
- Toggle preview (
Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
- Press
Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
Enjoy!
