VSCode GraphQL

GraphQL extension VSCode built with the aim to tightly integrate the GraphQL Ecosystem with VSCode for an awesome developer experience.

Features

General features

Load the extension on detecting graphql-config file at root level or in a parent level directory
Load the extension in .graphql, .gql files
Load the extension on detecting gql tag in js, ts, jsx, tsx, vue files
Support graphql-config files with one project and multiple projects

`.graphql`, `.gql` file extension support

syntax highlighting (type, query, mutation, interface, union, enum, scalar, fragments)
autocomplete suggestions
validation against schema
snippets (interface, type, input, enum, union)
hover support
go to definition support (input, enum, type)

`gql` tagged template literal support

syntax highlighting (type, query, mutation, interface, union, enum, scalar, fragments)
autocomplete suggestions
validation against schema
snippets

Usage

Install watchman.
Install the VSCode GraphQL Extension.

This extension requires a valid .graphqlconfig or .graphqlconfig.yml file in the project root. You can read more about that here.

To support language features like "go-to definition" across multiple files, please include includes key in the graphql-config per project. For example,

projects:
  app:
    schemaPath: src/schema.graphql
    includes: ["**/*.graphql"]
    extensions:
      endpoints:
        default: http://localhost:4000
  db:
    schemaPath: src/generated/db.graphql
    includes: ["**/*.graphql"]
    extensions:
      codegen:
      - generator: graphql-binding
        language: typescript
        output:
          binding: src/generated/db.ts

Notice that includes key supports glob pattern and hence ["**/*.graphql"] is also valid.

If you want to use a workspace version of TypeScript however, you must manually install the plugin along side the version of TypeScript in your workspace:

npm install --save-dev @divyenduz/ts-graphql-plugin

Then add a plugins section to your tsconfig.json or jsconfig.json

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@divyenduz/ts-graphql-plugin"
      }
    ]
  }
}

Finally, run the Select TypeScript version command in VS Code to switch to use the workspace version of TypeScript for VS Code's JavaScript and TypeScript language support. You can find more information about managing typescript versions in the VS Code documentation.

Development

This plugin uses two language services based on the context.

GraphQL language service when in .graphql, .gql files
Augmentation of GraphQL language service in TypeScript language service when using gql tag in .ts/.js/.tsx/.jsx files based on this documentation.

Setup and logging for development are different for these language services as documented below.

A. Testing/logging GraphQL Language Features

Clone the repository - https://github.com/prismagraphql/vscode-graphql
npm install
Open it in VSCode
Go to the debugging section and run the launch program "Extension"
This will open another VSCode instance with extension enabled
Open a project with a graphql config file - ":electric_plug: graphql" in VSCode status bar indicates that the extension is in use
Logs for GraphQL language service will appear in output section under GraphQL Language Service

B. Testing/logging TypeScript GraphQL Plugin Features

Clone ts-graphql-plugin and go to its directory.
npm install and npm link
Use npm link @divyenduz/ts-graphql-plugin in the folder that you have opened to test things in extension host - this is required for development
Switch to use workspace typescript - this is required for development
To see the logs of TypeScript language service, instructions are documented here. We need to set TSS_LOG environment variable to log to a file (see below) and then open VSCode through command line for it to pick up the TSS_LOG exported variable and then we can tail the file.

export TSS_LOG="-logToFile true -file <absolute-path> -level verbose"
cd <graphql-project-path>
code .
tail -f <absolute-path> | grep ts-graphql-plugin-log

License

MIT

ahmehri/vscode-graphql