vscode-rescript-relay

Improve quality-of-life of using RescriptRelay with VSCode. This requires RescriptRelay of version >= 0.13.0 and that you only use ReScript syntax with RescriptRelay.

Please report any issues you might have to the main RescriptRelay issue tracker.

Setup

Right now, you'll need to open VSCode in the root where you've installed Relay and that folder must be part of a Git Repository. For monorepos, this means you'll need to open the subfolder where your frontend project using Relay is located. This will hopefully be fixed in the future. You'll need to have watchman installed for the relay compiler to be able to run automatically.

This extension should Just Work(tm), as it finds and uses your relay.config.js.

Features

General

• Syntax highlighting for GraphQL in ReScript.
• Autocomplete and validations for your GraphQL operations using the official Relay LSP (or GraphQL Language Server if not available).
• Automatically formatting all GraphQL operations in your documents on save using prettier.
• Project is refreshed and recompiled whenever relay.config.js changes.
• A ton of codegen and automatic GraphQL refactoring is supported.
• Easily generate new components, extract existing selections to new fragment components, etc.
• Autocomplete-and-insert unselected GraphQL magically from the autocomplete list.
• Autocompleting fragment component JSX from values containing fragment spreads.

Code generation

Provides commands to generate boilerplate for fragments, queries, mutations and subscriptions via the commands:

• > Add fragment
• > Add query
• > Add mutation
• > Add subscription

The added GraphQL definition can also automatically be edited in GraphiQL using the vscode-graphiql-explorer extension if that is installed.

Enhanced autocompletion

Unselected GraphQL fields

You'll get autocomplete for any field that you haven't selected in your fragments, in addition to those you have already selected. When selecting a previously unselected field via autocomplete, the selection for that field is automatically inserted into the target fragment.

Available fragment components

If there's a variable in scope of your autocompletion that has fragments spread on it, you'll get autocompletion for those fragment spreads. Selecting a fragment spread will insert a best-effort JSX snippet of that fragment component. Example:

Autocompleting todoItem, where todoItem has ...Avatar_user spread on it, would give an item in the autocomplete called todoItem: Avatar_user. Selecting that item would insert <Avatar user=todoItem.fragmentRefs />.

getConnectionNodes

Autocompleting on a pipe (->) on a connection prop which is annotated with @connection will suggest the autogenerated helper FragmentModuleName.getConnectionNodes that'll automatically turn your connection into an array of non-optional nodes.

dataIdToString

Autocompleting on a pipe of a dataId prop will suggest RescriptRelay.dataIdToString for converting a dataId to a string.

Enhanced hover

Schema documentation and definitions

Enhanced hover information with GraphQL schema documentation, links to the current GraphQL type in the schema, and links to the actual definition of the source operation.

Code actions

Add new fragment component at value

Automatically add a new fragment component via a code action on ReScript values. Example: Run code actions on todoItem, which is the value for a fragment on TodoItem, and get a code action for automatically inserting a new fragment on the fragment for todoItem, create that new fragment component, and copy the JSX to use the new component. Everything wired together automatically.

Relay GraphQL Code actions

Add new fragment component at location in GraphQL operation

Inside any GraphQL definition, put your cursor on a field, activate code actions and choose Add new fragment component here. This will create a new component with a fragment and add that fragment next to your cursor.

Extract field selections to new fragment component

Inside any GraphQL definition, select any number of fields, activate code actions and choose Extract selection to fragment component. This will take your field selection and create a new component with a fragment including your selected fields. The fields you selected can optionally be removed from where they were extracted too if wanted, and the newly created fragment will be spread where you extracted the fields, setting up everything needed for you automatically.

Automatically set up fragment for pagination

Place your cursor on a connection field (basically a field of any GraphQL type that ends with Connection). Activate code actions, and select Set up pagination for fragment. This will setup all needed directives on your fragment to enable pagination.

Add @connection

Same as automatically setting up pagination, but only adding the @connection directive.

Expand union and interface members

Place your cursor on any field name of a field that's a union or interface, activate code actions, and select Expand union/interface members. All union/interface members will be expanded, including selecting its first field.

Make fragment refetchable

With the cursor in a fragment definition, activate code actions and select Make fragment refetchable. This will add the @refetchable directive to the fragment, with a suitable queryName preconfigured, making it possible to refetch the fragment.

Add variable to operation definition

In a query, mutation or subrscription, add a variable to any argument for a field, like myField @include(if: $showMyField). Put your cursor on the variable name $showMyField and activate code actions. Select Add variable to operation. The variable is added to the operation, like mutation SomeMutation($text: String!).

Add variable to @argumentDefinitions

In a fragment, add a variable to any argument for a field, like myField @include(if: $showMyField). Put your cursor on the variable name $showMyField and activate code actions. Select Add variable to @argumentDefinitions. The variable is added to the fragment's @argumentDefinitions, like fragment SomeFragment_user on User @argumentDefinitions(showMyField: {type: "Boolean" }).

Make fragment plural

With the cursor in a fragment definition, activate code actions and select Make fragment plural. The Relay directive for saying that a fragment is plural ıs added to the fragment definition.

Make fragment inline

With the cursor in a fragment definition, activate code actions and select Make fragment inline. The Relay directive for saying that this fragment should always be unmasked wherever spread is added to the fragment.