Skip to content
TypeScript Language Service Plugin for GraphQL developers
Branch: master
Clone or download
Latest commit 57d27a0 May 16, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e fix file path Nov 6, 2017
src Fix typo Apr 30, 2018
typedef/graphql-language-service-interface Add getSemanticDiagnostics feature Apr 7, 2017
.gitignore restructure dirs Apr 9, 2017
LICENSE.txt Chore: prettify example Aug 2, 2017
package.json Merge pull request #29 from Quramy/greenkeeper/ava-0.23.0 Dec 11, 2017
tsconfig.json Update deps Sep 11, 2017


wercker status npm version deps Greenkeeper badge GitHub license

TypeScript Language Service Plugin to help GraphQL client development(e.g. Apollo). This plugin parses and analyzes template strings in .ts and provides functions like GraphiQL to your editor or IDE.



This plugin extends TypeScript Language Service and provides the following features:

  • Completion suggestion
  • Get GraphQL diagnostics


First, confirm that your project has typescript(v2.3.x or later) and graphql.

To install this plugin, execute the following:

npm install ts-graphql-plugin -D

And configure plugins section in your tsconfig.json, for example:

  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "plugins": [
        "name": "ts-graphql-plugin",
        "schema": "path-or-url-to-your-schema.json",
        "tag": "gql" 

It's ready to go. Launch your TypeScript IDE.

Plugin options


It's a required parameter and should point a file or URL which contains your GraphQL schema data such as :

  "data": {
    "__schema": {
      "queryType": {
        "name": "Query"
      "types": [
          "kind": "OBJECT",
          "name": "Query",
          "description": null,
          "fields": [
              "name": "viewer",

You can generate a schema data .json file using introspectionQuery. If you want detail, see .

You can pass URL and custom HTTP headers. It's useful to use an existing GraphQL server like GitHub v4 API. For example:

  "schema": {
    "http": {
      "url": "",
      "headers": {
        "Authorization": "Bearer YOUR_GITHUB_API_TOKEN"

The schema option accepts the following type:

type SchemaConfig = string |
  file: {
    path: string;
} |
  http: {
    url: string;
    headers?: { [key: string]: string };


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:

import gql from 'graphql-tag';

// when tag paramter is 'gql'
const str1 = gql`query { }`;     // work
const str2 = `<div></div>`;       // don't work
const str3 = 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).

Available editors

I've checked the operation with the following editors:

  • Visual Studio Code
  • Vim (with tsuquyomi)

And the following editor have TypeScript plugin with LanguageService so they're compatible with this plugin:

  • Emacs
  • Sublime text
  • Eclipse

How it works

This plugin relies on graphql-language-service and adapts it for TypeScript Language Service.


This software is released under the MIT License, see LICENSE.txt.

You can’t perform that action at this time.