Relay for VSCode
The official extension to support Relay in VSCode.
Search for "Relay GraphQL" in the VS Code extensions panel or install through the marketplace.
- Make sure you have a Relay config file somewhere in your project.
- We support standard config file formats (
.json), and the the
relay field in your
- 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.
false) Whether or not we should automatically start the Relay Compiler in watch mode when you open a project.
quiet-with-errors) Specify the output level of the Relay language server. The available options are
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
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.
- Hover type information
- Diagnostics (Errors, Warnings)
- Go to Definition for fragments, fields, GraphQL types, etc.
Restart Language Server: Restart the Relay language server.
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.
If you open the nested directory as the root workspace in VSCode, the extension may work, your mileage may vary.
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.
vscode-graphql. All of the grammars for syntax highlighting were taken directly from vscode-graphql.