Editor Support

import useBaseUrl from '@docusaurus/useBaseUrl';

TL;DR: We have a VS Code Extension

---

The Relay compiler has a rich understanding of the GraphQL embedded in your code. We want to use that understanding to improve the developer experience of writing apps with Relay. So, starting in v14.0.0, the new Rust Relay compiler can provide language features directly in your code editor. This means:

Relay compiler errors surface as red squiggles directly in your editor

Autocomplete throughout your GraphQL tagged template literals

Hover to see type information and documentation about Relay-specific features

@deprecated fields are rendered using strikethrough

Click-to-definition for fragments, fields and types

Quick fix suggestions for common errors

Language Server

The editor support is implemented using the Language Server Protocol which means it can be used by a variety of editors, but in tandem with this release, Terence Bezman from Coinbase has contributed an official VS Code extension.

Find it here!

Why Have a Relay-Specific Editor Extension?

The GraphQL foundation has an official language server and VS Code extension which provides editor support for GraphQL generically. This can provide a good baseline experience, but for Relay users, getting this information directly from the Relay compiler offers a number of benefits:

• Relay compiler errors can surface directly in the editor as “problems”, often with suggested quick fixes
• Hover information is aware Relay-specific features and directives and can link out to relevant documentation