Relay for VSCode

The official extension to support Relay in VSCode.

Installation

Search for "Relay GraphQL" in the VS Code extensions panel or install through the marketplace.

Setup

• Make sure you have a Relay config file somewhere in your project.
  • We support standard config file formats (.yml, .js, .json), and the the relay field in your package.json
• Make sure you have the relay-compiler installed in your project. The bare minimum for this extension is v13.
• Make sure you are able to run the relay-compiler command from the command line. If yarn relay-compiler works, it's very likely that the extension will work. See more on debugging below.
• Remove / disable any conflicting GraphQL extensions you have installed.

Configuration

• relay.autoStartCompiler (default: false) Whether or not we should automatically start the Relay Compiler in watch mode when you open a project.

• relay.outputLevel (default: quiet-with-errors) Specify the output level of the Relay language server. The available options are

  • quiet
  • quiet-with-errors
  • verbose
  • debug

• relay.pathToBinary (default: null) A path relative to the Relay binary relative to the root of your project. If this is not specified, we will try to find one in your node_modules folder.

• relay.rootDirectory (default: VSCode project root) A path relative to the root of your VSCode project for the extension to work from. The default value is the root of your project. This will change where we start looking for the relay-compiler node module. This will also affect where the LSP server is started, therefore affecting how the relay config is found. This is helpful if your project is in a nested directory.

• relay.pathToConfig (default: null) Path to a relay config relative to the rootDirectory. Without this, the compiler will search for your config. This is helpful if your relay project is in a nested directory.

Features

• IntelliSense
• Hover type information
• Diagnostics (Errors, Warnings)
• Go to Definition for fragments, fields, GraphQL types, etc.
• GraphQL syntax highlighting within .graphql and JavaScript/TypeScript files.

Commands

• Restart Language Server: Restart the Relay language server.

Known Issues

Relay Compiler > v13

We built the language server around the new Rust compiler. We do not have plans to support any version < v13.

One Relay Config

The new Relay Compiler supports multi-project configs. If you have multiple projects using Relay inside of a single repo, you should try out this new config format. Currently, the VSCode extension only works with a singular Relay config.

e.g. if you have your relay.config.js in a nested directory like /projects/projectA/relay.config.js, the extension will fail to start since the Relay Compiler will not be able to find the Relay config.

Exception

If you open the nested directory as the root workspace in VSCode, the extension may work, your mileage may vary.

VSCode Workspaces

We do not support running multiple instances of the LSP at once. We currently use the deprecated rootPath property from the VSCode API. This means we will start the Relay Compiler at the directory which your VSCode project is opened. Once we fix this, we will be able to support multiple Relay configs.

Credits

• vscode-graphql. All of the grammars for syntax highlighting were taken directly from vscode-graphql.