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.
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.
- 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.jschanges. - 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.
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.
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.
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 />.
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.
Autocompleting on a pipe of a dataId prop will suggest RescriptRelay.dataIdToString for converting a dataId to a string.
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.
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.
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.
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.
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.
Same as automatically setting up pagination, but only adding the @connection directive.
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.
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.
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!).
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" }).
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.
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.