https://github.com/zth/vscode-rescript-relay
https://github.com/zth/vscode-rescript-relay
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zth/vscode-rescript-relay
- Owner: zth
- Created: 2021-01-15T19:35:24.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T06:35:24.000Z (almost 3 years ago)
- Last Synced: 2023-05-16T07:26:46.661Z (almost 3 years ago)
- Language: TypeScript
- Size: 305 KB
- Stars: 13
- Watchers: 2
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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](https://github.com/zth/rescript-relay/issues).
## 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](https://facebook.github.io/watchman/docs/install.html) 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 ``.
#### `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.