andris-silis / vscode-graphql

VSCode GraphQL extension (autocompletion, go-to definition, syntax highlighting)

VSCode GraphQL

💡Note: This extension no longer supports .prisma files. If you are using this extension with Prisma 1, please rename your datamodel from datamodel.prisma to datamodel.graphql and this extension would pick that up.

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

1. Install watchman.
2. 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.

1. GraphQL language service when in .graphql, .gql files
2. 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

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

B. Testing/logging TypeScript GraphQL Plugin Features

1. Clone ts-graphql-plugin and go to its directory.
2. npm install and npm link
3. 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
4. Switch to use workspace typescript - this is required for development
5. 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