Announcing the Relay VSCode extension

Posted on by

Tl;dr: Coinbase is introducing its innovative VSCode extension created in collaboration with the Relay team, for the Relay GraphQL client, which is available for developer use now.

By Terence Bezman, Coinbase Senior Software Engineer

In collaboration with the Relay team at Meta, Coinbase has built a VSCode extension to integrate with the Relay language server which is now available for developer use.

The Relay framework is self-described as “the GraphQL client that scales with you”. As mentioned in a previous blog post, we currently use Relay to accelerate development for 300+ engineers on our core applications. Having a world class IDE experience is an important facet to improve engineer productivity — which is a top priority.

The extension allows for connection to the following:

  • IntelliSense (autocomplete in your GraphQL tags)
  • Go to Definition for fragments, fields, GraphQL types, etc.
  • Diagnostics (Errors, Warnings)
  • Hover type information
  • GraphQL syntax highlighting

Motivation

Prior to this extension, syntax highlighting and IntelliSense were available by using any of the other existing GraphQL extensions in the VSCode Marketplace, so why did Coinbase decide to build another one?

From custom directives to its own compiler, Relay adds several features on top of GraphQL. A third-party editor integration would need to re-implement all of the work done in the Relay Compiler to achieve what we’ve built in this extension. This feature integrates directly into the Relay Compiler via a language server giving us the full context from the compiler. This level of context unlocks the following features in your editor:

  • Showing Relay Compiler errors in your code
  • Jump to definition on Relay Resolver fields
  • Support for Relay directives

As Relay continues to build more features, Coinbase wants to remain at the forefront of this innovation and help set the tone for a better developer experience.

Maintainership

Part of what makes a great open source contributor is ownership and maintenance of the work. Coinbase has allocated engineering resources to create the first version of this VSCode extension and for continued support in the future. It’s important that the community understands that we do not view this as a one and done project, but a relationship we want to maintain for years to come.

Giving back to the community

Rather than be a passive consumer of Relay, Coinbase is working to be an active and engaged part of this community. Through our shared cooperation with Relay, we are working to understand the product at a deeper level — and leveraging that knowledge to assist the community in closing old issues and submitting pull requests to ensure the project’s success.

The Coinbase team is thankful for the amazing work the Relay team has done thus far to create a better developer experience with Relay. We want to honor the value this project has brought to our team and continue to innovate in an open-source way that benefits our community.

Announcing the Relay VSCode extension was originally published in The Coinbase Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.