{"id":13727299,"url":"https://github.com/zth/vscode-reason-relay","last_synced_at":"2025-03-24T02:32:00.963Z","repository":{"id":49653290,"uuid":"256826623","full_name":"zth/vscode-reason-relay","owner":"zth","description":"VSCode extension for working with ReasonRelay.","archived":false,"fork":false,"pushed_at":"2021-06-11T11:41:23.000Z","size":300,"stargazers_count":7,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-19T02:37:56.557Z","etag":null,"topics":["graphql","reasonml","relay","relay-modern","vscode-extension"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zth.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-18T18:38:40.000Z","updated_at":"2023-08-20T12:44:42.000Z","dependencies_parsed_at":"2022-09-17T08:11:06.627Z","dependency_job_id":null,"html_url":"https://github.com/zth/vscode-reason-relay","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zth%2Fvscode-reason-relay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zth%2Fvscode-reason-relay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zth%2Fvscode-reason-relay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zth%2Fvscode-reason-relay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zth","download_url":"https://codeload.github.com/zth/vscode-reason-relay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245198637,"owners_count":20576406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","reasonml","relay","relay-modern","vscode-extension"],"created_at":"2024-08-03T01:03:48.718Z","updated_at":"2025-03-24T02:32:00.675Z","avatar_url":"https://github.com/zth.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vscode-reason-relay\n\nImprove quality-of-life of using ReasonRelay with VSCode.\n\n## Setup\n\nRight now, you'll need to open VSCode in the _root where you've installed Relay_. 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.\n\n\u003e In addition to this extension, you're encouraged to also install `vscode-graphiql-explorer` for the best experience.\n\nThis extension should _Just Work(tm)_, as it finds and uses your `relay.config.js`.\n\n## Features\n\n### General\n\n- Syntax highlighting for GraphQL in ReasonML.\n- Autocomplete and validations for your GraphQL operations using the official GraphQL Language Server. Including for Relay specific directives.\n- Automatically formatting all GraphQL operations in your documents on save using `prettier`.\n- Run the Relay compiler through VSCode directly, and get notified when it errors.\n- Project is refreshed and recompiled whenever `relay.config.js` changes.\n\n### Code generation\n\nProvides commands to generate boilerplate for `fragments`, `queries`, `mutations` and `subscriptions` via the commands:\n\n- `\u003e Add fragment`\n- `\u003e Add query`\n- `\u003e Add mutation`\n- `\u003e Add subscription`\n\nThe added GraphQL definition can also automatically be edited in GraphiQL using the `vscode-graphiql-explorer` extension if that is installed.\n\n### Relay GraphQL Code actions\n\n#### Extract field selections to new fragment component\n\nInside 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.\n\n#### Automatically set up fragment for pagination\n\nPlace 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.\n\n#### Expand union and interface members\n\nPlace 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.\n\n#### Make fragment refetchable\n\nWith 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.\n\n#### Add variable to `@argumentDefinitions`\n\nIn 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 fragments `@argumentDefinitions`, like `fragment SomeFragment_user on User @argumentDefinitions(showMyField: {type: \"Boolean\" })`.\n\n#### Make fragment plural\n\nWith 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.\n\n#### Make fragment inline\n\nWith 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.\n\n## Roadmap\n\nHere's a list of features (in no particular order of importance or scope size) that I'd like to add support for at some point:\n\n- \"Diagnostics\" like notifying the user about custom scalars that don't have proper definition in `relay.config.js`\n- Autosetup ReasonRelay in a project via VSCode (install packages, setup `bsconfig.json`, add needed files, etc)\n- Code action for inserting the `@connection` directive\n- Tie the extension together with the docs much more. Make it easy to open the relevant part of the docs depending on what you're doing.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzth%2Fvscode-reason-relay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzth%2Fvscode-reason-relay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzth%2Fvscode-reason-relay/lists"}