{"id":13727361,"url":"https://github.com/kumarharsh/graphql-for-vscode","last_synced_at":"2025-06-21T11:10:46.930Z","repository":{"id":46751350,"uuid":"70046397","full_name":"kumarharsh/graphql-for-vscode","owner":"kumarharsh","description":"GraphQL syntax highlighting, linting, auto-complete, and more!","archived":false,"fork":false,"pushed_at":"2021-09-27T21:58:18.000Z","size":1506,"stargazers_count":281,"open_issues_count":32,"forks_count":45,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-06-04T08:50:36.456Z","etag":null,"topics":["autocomplete","graphql","linter","schema","schema-validation","snippets","syntax-highlighting","vscode"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kumarharsh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"License.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-05T09:28:03.000Z","updated_at":"2025-05-25T01:04:07.000Z","dependencies_parsed_at":"2022-09-26T18:10:58.513Z","dependency_job_id":null,"html_url":"https://github.com/kumarharsh/graphql-for-vscode","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"purl":"pkg:github/kumarharsh/graphql-for-vscode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumarharsh%2Fgraphql-for-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumarharsh%2Fgraphql-for-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumarharsh%2Fgraphql-for-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumarharsh%2Fgraphql-for-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kumarharsh","download_url":"https://codeload.github.com/kumarharsh/graphql-for-vscode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumarharsh%2Fgraphql-for-vscode/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261110672,"owners_count":23111069,"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":["autocomplete","graphql","linter","schema","schema-validation","snippets","syntax-highlighting","vscode"],"created_at":"2024-08-03T01:03:51.839Z","updated_at":"2025-06-21T11:10:41.919Z","avatar_url":"https://github.com/kumarharsh.png","language":"TypeScript","funding_links":[],"categories":["Tools","TypeScript"],"sub_categories":["Crystal Libraries"],"readme":"\u003ch1 align=\"center\"\u003e\u003cimg src=\"https://cdn.rawgit.com/kumarharsh/graphql-for-vscode/master/images/logo.png\" alt=\"Logo\" height=\"128\" /\u003e\u003c/h1\u003e\n\u003ch2 align=\"center\"\u003eGraphql For VSCode\u003c/h2\u003e\n\u003cdiv align=\"center\"\u003e\n  \n  [![Latest Release](https://vsmarketplacebadge.apphb.com/version-short/kumar-harsh.graphql-for-vscode.svg)](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode)\n  [![Installs](https://vsmarketplacebadge.apphb.com/installs-short/kumar-harsh.graphql-for-vscode.svg)](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode)\n  [![Rating](https://vsmarketplacebadge.apphb.com/rating-short/kumar-harsh.graphql-for-vscode.svg)](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode)\n\n\u003c/div\u003e\n\n\u003chr\u003e\n\nVSCode extension for GraphQL schema authoring \u0026 consumption.\n\n![A preview of the extension](https://cdn.rawgit.com/kumarharsh/graphql-for-vscode/master/images/preview.png)\n\n\n## What's in the Box?\n\n* **Go to Definition**: Just \u003ckbd\u003eF12\u003c/kbd\u003e or \u003ckbd\u003eCtrl\u003c/kbd\u003e+Click on any graphql type, and you'll jump right to it's definition.\n\n    ![Go to Definition](https://cdn.rawgit.com/kumarharsh/graphql-for-vscode/master/images/goto-definition.gif)\n* **Autocomplete**: Uses the [@playlyfe/gql](https://npmjs.org/package/@playlyfe/gql) library to read your whole graphql schema definitions and provide you with autocomplete support while writing \u0026 editing your `.gql` files.\n\n  ![Autocomplete](https://cdn.rawgit.com/kumarharsh/graphql-for-vscode/master/images/autocomplete.gif)\n* **Schema Validation**: The extension also validates your schema, so that you catch errors early.\n* **Linting**: This extension uses a similar method as used by the [Codemirror graphql](https://github.com/graphql/codemirror-graphql) project for linting.\n* **Great Syntax Highlighting**: Now, your graphql queries, mutations and gql files will look as beautiful as the rest of your code with an awesome syntax highlighter. It works not just with your .gql/.graphql schema files, but also within your code - supports syntax highlighting within:\n  + Javascript\n  + Typescript\n  + Vue\n  + Ruby\n  + Cucumber\n  + ReasonML/OCaml\n  + Markdown fenced code-blocks\n  + (Submit a PR to support your language!)\n\n* **Snippets**: Some commonly used snippets are provided which help while writing mutations and queries, such as defining types, interfaces and input types.\n\n## Setting it Up\n\n1. Ensure that you have the [@playlyfe/gql](https://npmjs.org/package/@playlyfe/gql) library (v2.x) installed and available to this extension. If you've installed the library in a folder other than the workspace root, then add the path to the node_modules directory as a setting:\n    ```json\n    {\n      \"graphqlForVSCode.nodePath\": \"ui/node_modules\"\n    }\n    ```\n\n2. Ensure you have [watchman](https://facebook.github.io/watchman/docs/install.html) installed and available in your path. Watchman watches your gql files and provides up-to-date suggestions. For users on Windows, get the latest build mentioned in [this issue](https://github.com/facebook/watchman/issues/19) and add the location of `watchman.exe` to your environment path.\n\n3. Create a .gqlconfig file (required by the `@playlyfe/gql` package).\n\n    ### A minimal example:\n    The .gqlconfig is a JSON file with only one required key: schema.files which is the path to your *.gql files relative to your workspace root.\n    ```js\n    /* .gqlconfig */\n    {\n      schema: {\n        files: 'schemas/**/*.gql'\n      }\n    }\n    ```\n    You can use the string `files: \"**/*.gql\"` instead if you want to find any `.gql` file recursively in the workspace dir.\n\n    To see the full configuration, check out the [GQL](https://github.com/Mayank1791989/gql) project's docs.\n\n4. To enable autocomplete support within your code, add these lines to your `.gqlconfig` file. The `query` section of the config contains an array of `file` config with matchers. You can add more files by directing the `EmbeddedQueryParser` to run when your code within the `startTag` and `endTag` matches:\n    ```js\n    /* .gqlconfig */\n    {\n      schema: {\n        files: \"schemas/**/*.gql\"\n      },\n      query: {\n        files: [ /* define file paths which you'd like the gql parser to watch and give autocomplete suggestions for */\n          {\n            match: ['src/**/*.ts', 'src/**/*.tsx'], // match multiple extensions\n            parser: ['EmbeddedQueryParser', { startTag: 'gql`', endTag: '`' }], // parse any query inside gql template literal\n          },\n          {\n            match: 'ui/src/**/*.js', // for js\n            parser: ['EmbeddedQueryParser', { startTag: 'Relay\\\\.QL`', endTag: '`' }], // parse Relay syntax\n            isRelay: true,\n          },\n          {\n            match: 'features/**/*.feature', // for gherkin\n            parser: ['EmbeddedQueryParser', { startTag: 'graphql request\\\\s+\"\"\"', endTag: '\"\"\"' }],\n          },\n          {\n            \"match\": \"lib/**/*.rb\", // sample config you might use for Ruby-aware highlighting (inside `\u003c\u003c-GRAPHQL` heredocs)\n            \"parser\": [\"EmbeddedQueryParser\", { \"startTag\": \"\u003c\u003c-GRAPHQL\", \"endTag\": \"GRAPHQL\" }]\n          },\n          {\n            match: 'fixtures/**/*.gql',\n            parser: 'QueryParser',\n          },\n        ],\n      },\n    }\n    ```\n\n    Again, refer to [GQL](https://github.com/Mayank1791989/gql) docs for details about configuring your `.gqlconfig` file.\n\n\n### Using remote schemas\n\nIf you are using a schema that is not in your client's project, you'll need to download it so it's available for `@playlyfe/gql`.\nAfter downloading, you need to reference these schemas in your `.gqlconfig`.\n\n_One way_ to do this is to use [graphql-cli](https://github.com/graphql-cli/graphql-cli):\n\n```json\n{\n  \"scripts\": {\n    \"gql:fetch-schema\": \"graphql get-schema --project prod\"\n  } \n}\n```\n\nYou will also need a `.graphqlconfig.yml` configuration file so that `graphql-cli` knows where to download the schema from (specified by the `--project prod` argument to the command):\n\n```yaml\n# .graphqlconfig.yml\nprojects:\n  prod:\n    schemaPath: schema/schema.graphql\n    extensions:\n      endpoints:\n        default: https://prod.my-graphql-api.com/graphql\n```\n\nThereafter, you can fetch changes to the graphql schema by running the command:\n\n```bash\n# download schema\nyarn gql:fetch-schema\n```\n\n## Future Plans\n* Tests: Figure out tests.\n\n## Contributing\n* If you have a suggestion or a problem, please open an issue.\n* If you'd like to improve the extension:\n  + If you've made any improvements to the extension, send a Pull Request!\n  + The instructions to run and debug the extension are [here](#hacking)\n\n## Hacking\n\nIf you're making changes to the extension, then run `yarn dev` inside this directory,\nthen just press \u003ckbd\u003eF5\u003c/kbd\u003e to launch the *Extension Development Host* instance of vscode. Whenever you make a change, press *Reload* to reload the EDH instance.\n\n## Major Contributors\n* [Mayank Agarwal](https://github.com/Mayank1791989) - added autocomplete, goto definition, schema validation support\n\n## Changelog\n* Latest changes are available on the [releases](https://github.com/kumarharsh/graphql-for-vscode/releases) page.\n* Older changelogs can be found [here](/CHANGELOG.md).\n\n---\n\n*Happy Querying!*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkumarharsh%2Fgraphql-for-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkumarharsh%2Fgraphql-for-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkumarharsh%2Fgraphql-for-vscode/lists"}