{"id":15134848,"url":"https://github.com/jetbrains/js-graphql-intellij-plugin","last_synced_at":"2025-12-24T01:32:07.062Z","repository":{"id":39584813,"uuid":"47924453","full_name":"JetBrains/js-graphql-intellij-plugin","owner":"JetBrains","description":"GraphQL language support for WebStorm, IntelliJ IDEA and other IDEs based on the IntelliJ Platform.","archived":false,"fork":false,"pushed_at":"2025-04-11T15:20:30.000Z","size":32274,"stargazers_count":889,"open_issues_count":149,"forks_count":96,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-12T08:07:39.929Z","etag":null,"topics":["apollo","gql","graphql","intellij","relay","webstorm"],"latest_commit_sha":null,"homepage":"https://jimkyndemeyer.github.io/js-graphql-intellij-plugin/","language":"Java","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/JetBrains.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-13T15:22:27.000Z","updated_at":"2025-04-11T15:20:34.000Z","dependencies_parsed_at":"2023-10-16T04:13:06.005Z","dependency_job_id":"64530dd2-fdc1-400c-8ff0-064279823217","html_url":"https://github.com/JetBrains/js-graphql-intellij-plugin","commit_stats":{"total_commits":904,"total_committers":56,"mean_commits":"16.142857142857142","dds":"0.46349557522123896","last_synced_commit":"fcd80eea779e595bc5e5b7aa2f1dc3c69b179d97"},"previous_names":[],"tags_count":244,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fjs-graphql-intellij-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fjs-graphql-intellij-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fjs-graphql-intellij-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fjs-graphql-intellij-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JetBrains","download_url":"https://codeload.github.com/JetBrains/js-graphql-intellij-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248749880,"owners_count":21155680,"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":["apollo","gql","graphql","intellij","relay","webstorm"],"created_at":"2024-09-26T05:40:18.007Z","updated_at":"2025-12-24T01:32:07.049Z","avatar_url":"https://github.com/JetBrains.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![official JetBrains project](https://jb.gg/badges/official.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)\n\n# GraphQL IntelliJ Plugin\n\nGraphQL language support for [WebStorm](https://www.jetbrains.com/webstorm/), [IntelliJ IDEA](https://www.jetbrains.com/idea/) and all other\n[IDEs](https://www.jetbrains.com/products/#type=ide). The plugin works with all IDEs in the IntelliJ Platform.\n\n# Table of Contents\n\n* [Prerequisites](#prerequisites)\n* [Installation](#installation)\n* [Features](#features)\n* [How to use](#how-to-use)\n* [Configuration](#configuration)\n  * [Basic configuration](#basic-configuration)\n  * [Composite schema](#composite-schema)\n  * [Remote schemas](#remote-schemas)\n  * [Local introspection schemas](#local-introspection-schemas)\n  * [Advanced configuration](#advanced-configuration)\n  * [Multiple projects](#multiple-projects)\n    * [Config per project](#config-per-project)\n    * [Single config](#single-config)\n  * [Configuration files](#configuration-files)\n    * [Yaml](#yaml)\n    * [JavaScript](#javascript)\n    * [TypeScript](#typescript)\n  * [Migration](#migration)\n  * [Legacy configuration](#legacy-configuration)\n  * [Environment variables](#environment-variables)\n    * [.env files](#env-files)\n    * [Manual configuration](#manual-configuration)\n    * [System](#system)\n* [Frameworks](#frameworks)\n  * [Gatsby](#gatsby)\n* [Introspection](#introspection)\n  * [Rerun latest introspection](#rerun-latest-introspection)\n* [Queries](#queries)\n  * [Scratch files](#scratch-files)\n* [Toolbar](#toolbar)\n* [Tool window](#tool-window)\n* [Injections](#injections)\n* [Acknowledgements](#acknowledgements)\n* [License](#license)\n\n# Prerequisites\n\nThe plugin and this documentation assume you are already familiar with the GraphQL language. If you're not, please visit the official\n[graphql.org](https://graphql.org/) website first.\nThe plugin works out of the box with popular GraphQL clients such as [Apollo GraphQL](https://www.apollographql.com/) and\n[Relay](https://facebook.github.io/relay/), but you're free to choose your client and server framework.\n\n# Installation\n\nThe plugin is available from [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/8097-js-graphql).\nYou can install it directly from your IDE via the `File | Settings/Preferences | Plugins` screen.\nOn the `Marketplace` tab simply search for `graphql` and select the `GraphQL` suggestion:\n\n![marketplace](docs/assets/marketplace.png)\n\n# Features\n\nThe main features of this plugin include:\n\n- Full language support for GraphQL Specification including the Schema Definition Language (SDL).\n- Schema-aware completion, error highlighting, and documentation.\n- Syntax highlighting, code-formatting, folding, commenter, and brace-matching.\n- The plugin [discovers your local schema](#configuration) on the fly. Remote schemas are easily fetched using\n  introspection. You can introspect GraphQL endpoints to generate schema declaration files using the GraphQL Type System Definition\n  Language.\n- Support for [multi-schema projects](#multiple-projects) using configurable project scopes or\n  `graphql-config` files. Schema discovery is configured using [graphql-config](https://the-guild.dev/graphql/config/docs)\n  files, which includes support for multi-schema projects.\n- Built-in support for [Relay](https://facebook.github.io/relay/) and [Apollo](https://www.apollographql.com/) projects:\n  `graphql` and `gql` tagged template literals in JavaScript and TypeScript are automatically recognized as GraphQL.\n- Execute queries using variables against configurable endpoints, including support for custom headers and environment variables.\n- `Find Usages` and `Go to Declaration` for schema types, fields, and fragments.\n- `Structure view` to navigate GraphQL files.\n- Load variables from shell, `.env` files or setup them manually per configuration file.\n- Built-in `Relay`, `Federation`, and `Apollo Kotlin` type definitions (You need to enable it\n  in `Preferences / Settings | Languages \u0026 Frameworks | GraphQL`).\n\n# How to use\n\nThis developer guide covers how to set up your project to get the most out of the GraphQL language tooling in this plugin.\n\nIt is important to configure how the schema types are discovered. If the schema types are not discovered correctly, language features such\nas completion and error highlighting will be based on the wrong type information.\n\nSchemas and their types are declared using GraphQL Type System Definition Language, which is also widely known as GraphQL Schema Definition\nLanguage (often abbreviated as SDL). If you're authoring your schemas in SDL, the plugin provides the following features:\n\n- Completion for types when defining fields, arguments, implemented interfaces, and so on.\n- Error highlighting of schema errors such as unknown types, wrong use of types, and missing fields when implementing interfaces.\n- Find usages in SDL and refactoring such as rename, which will update the relevant queries, mutations, and so on.\n\n# Configuration\n\n\u003e GraphQL Config docs could be found [here](https://the-guild.dev/graphql/config/docs).\n\nBy default, the plugin assumes that your project contains a single schema. If this is the case, you don't need to perform any actions in\nterms of schema discovery. For a single-schema project, schema types are discovered as follows: All `.graphql` files in the `Project files`\nscope are processed for type definitions, which are added to a singleton type registry. If the IDE has JavaScript language support, injected\nGraphQL strings in the `Project files` scope are processed for all JavaScript file types. File extensions\ninclude `.js`, `.jsx`, `.ts`,`.tsx`, `.html` and html-based files like `.vue`.\n\nFor projects with multiple schemas, developers have to configure a scope for each schema. The purpose of a schema-specific scope is to\nprevent types from being picked up in more than one GraphQL type registry, which would likely result in validation errors. This is because\nthese types will appear to have been declared more than once. In addition, the scopes prevent non-conflicting types from showing up in\ncompletions and ensure that validation only recognizes the types that belong to the current schema.\n\nHowever, it’s recommended to have a simple config in the project root. Otherwise, you will not be able to define a remote URL for making\nGraphQL queries directly from the editor.\n\nA documentation describing GraphQL Config itself could be found [here](https://the-guild.dev/graphql/config/docs).\nIn the following sections, we will discuss how to use it in the context of this plugin.\n\n## Basic configuration\n\nA simple configuration file `graphql.config.yml` can be created using a context action on the directory in the project view\nvia `New \u003e GraphQL Config`:\n\n```yaml\nschema: schema.graphql\ndocuments: '**/*.graphql'\n```\n\nHere, we expect a schema to be defined in a local file `schema.graphql`. The `documents` key is defined using a glob pattern that will\ninclude any GraphQL operation in the current or nested directory. By operation, we mean only GraphQL queries and fragments, but not type\ndefinitions.\n\nPlease note that paths are relative to the config directory, unless they are explicitly defined as absolute. Therefore, you do not need to\nprefix them with `./`. Just `schema.graphql` is sufficient. The same applies to glob patterns.\n\n## Composite schema\n\nGraphQL Config can also assemble multiple modularized schemas into a single GraphQL schema object.\n\nYou can specify a list of files:\n\n```yaml\nschema:\n  - ./foo.graphql\n  - ./bar.graphql\n  - ./baz.graphql\n```\n\nAlternatively, you can use a glob pattern to find and include pieces of schema:\n\n```yaml\nschema: ./*.graphql # includes every GraphQL file in current directory\n# OR\nschema: ./**/*.graphql # includes GraphQL files recursively\n```\n\nGraphQL Config looks for those files, reads the files and merges them to produce a GraphQL schema object.\n\n## Remote schemas\n\nIf you have a GraphQL endpoint and do not have the local schema file yet, you can define one or more endpoints and make an introspection\nquery. This will load a schema from the server, convert it to a GraphQL file, and save it in the IDE's cache directory.\n\nDepending on whether you need additional configuration for an endpoint, you can specify it as a string or an object with supplementary keys\ncontaining data such as headers.\n\n```yaml\nschema: https://my.api.com/graphql\n\nschema:\n  - https://my.api.com/one/graphql\n  - https://my.api.com/two/graphql\n\nschema:\n  - https://my.api.com/one/graphql:\n      headers:\n        Authorization: Bearer ${TOKEN}\n```\n\n\u003e Pay special attention to the last example; it should have correct indentation.\n\nNow it is required to run an introspection query manually to load a schema from the provided endpoint. You can do this in\n[multiple ways](#introspection).\n\nYou probably need to authenticate with your remote service to run queries, and apparently you'll do this using HTTP headers and some kind of\ntoken inside them. The best way to provide a token without hardcoding it in the config file is\nthrough [environment variables](#environment-variables). An\nexample of this is a `TOKEN` variable in the code snippet above.\n\n## Local introspection schemas\n\nIf you want to store an introspection result locally, you can configure an endpoint as it was done in the legacy configuration format.\nDefine one or multiple endpoints in the `endpoints` extension, and then make an introspection query. A file will be saved at the first path\nin the corresponding `schema` section, for example, a `local.graphql` file in the example below.\n\n```yaml\nschema: local.graphql\nextensions:\n  endpoints:\n    One:\n      url: https://my.api.com/one/graphql\n      headers:\n        Authorization: bearer ${TOKEN}\n    Two:\n      url: https://my.api.com/two/graphql\n```\n\n## Advanced configuration\n\nIf you need more fine-grained control over which files should be included in the schema, you can use the optional `include` and `exclude`\nkeys. First, it checks a candidate file for exclusion. If it's not excluded, the file path is matched against the `include` pattern.\n\nIn that example, `schema.graphql` and every file inside the `src` directory except files in `__tests__` will be included in that project.\n\n```yaml\nschema: schema.graphql\nexclude: 'src/**/__tests__/**'\ninclude: src/**\n```\n\n\u003e Remember that all files specified in `schema` or `documents` are included by default.\n\n## Multiple projects\n\n### Config per project\n\nA config file defines a GraphQL \"module\" root, similar to how `package.json` or similar files do. Even if this file is empty, all files in\nthat directory and in the nested ones will use a schema associated with that configuration. Therefore, the simplest way to separate\ndifferent schemas is to create a configuration file inside each subdirectory, if they are completely independent, as is usually the case\nwith monorepos. With this approach, the location of the config files creates separate scopes for each subtree.\n\n```\n- project root/\n    - product a (schema one)/\n        - .graphql.config.yml \u003c-----\n        - schema files and graphql aware components\n    - product b (schema two)/\n        - .graphql.config.yml \u003c-----\n        - schema files and graphql aware components\n```\n\n### Single config\n\nIf you prefer to have a single configuration file, you can specify multiple projects in the same file.\n\n```\n- project root/\n    - .graphql.config.yml \u003c-----\n    - frontend (schema one)/\n        - schema files and graphql aware components\n    - backend (schema two)/\n        - schema files and graphql aware components\n    - queries/\n```\n\nThe configuration for that case should appear as follows:\n\n```yaml\nprojects:\n  frontend:\n    schema: https://my.api.com/graphql\n    documents: frontend/**/*.{graphql,js,ts}\n  backend:\n    schema: backend/schema.graphql\n    documents: backend/**/*.graphql\n```\n\nFiles are matched against projects in the order in which the projects are defined. Therefore, if a file matches several projects, the first\none will be chosen.\n\nGraphQL operations are matched non-strictly when no `include` or `exclude` keys are defined for a specific project. This means that if a\nquery or fragment does not match any project explicitly, the file will be associated with the first project that does not have `include`\nor `exclude` keys. In the example above, there is an additional root directory called `queries`, in addition to `backend` and `frontend`.\nIf `queries` contains some GraphQL documents that do not match any of the provided patterns, the first project, `frontend`, will be\nassociated with those queries.\n\nTo achieve this, you can add an `exclude` pattern to the `frontend` project configuration. This will associate the files in the `queries`\nfolder with the `backend` project.\n\n```yaml\nprojects:\n  frontend:\n    schema: https://my.api.com/graphql\n    documents: frontend/**/*.{graphql,js,ts}\n    exclude: queries/**  # \u003c--- will enable strict matching for that project\n  backend:\n    schema: backend/schema.graphql\n    documents: backend/**/*.graphql\n```\n\nThis does not apply to type definitions, as mentioned previously. The plugin only uses type definitions from files that strictly match\nthe `schema` or `include` keys.\n\n\u003e NOTE: Values on the root level are defaults for projects. Therefore, if a project does not define a property such as `schema`, `include`,\n\u003e or even `extensions`, it will take a value from the root if it exists.\n\n## Configuration files\n\nThe plugin supports multiple configuration file formats. Here is a list of all the possible options:\n\n- graphql.config.json\n- graphql.config.js\n- graphql.config.cjs\n- graphql.config.mjs\n- graphql.config.ts\n- graphql.config.cts\n- graphql.config.mts\n- graphql.config.yaml\n- graphql.config.yml\n- .graphqlrc (YAML and JSON)\n- .graphqlrc.json\n- .graphqlrc.yaml\n- .graphqlrc.yml\n- .graphqlrc.js\n- .graphqlrc.cjs\n- .graphqlrc.mjs\n- .graphqlrc.ts\n- .graphqlrc.cts\n- .graphqlrc.mts\n\n### Yaml\n\nThe official JetBrains YAML plugin should be installed. However, it should be bundled into every IntelliJ IDE by default, so it usually\ndoesn't require any action.\n\n### JavaScript\n\nInternally, we use Node.js to load a JavaScript or TypeScript config file. Therefore, Node.js should be installed and properly configured in\nthe IDE. Note that the JavaScript plugin should also be installed in the IDE. This type of configuration will not work in Community\nversions, but should work in IntelliJ IDEA, WebStorm, PHPStorm, PyCharm, and other editions.\n\nAs mentioned before, we don't transpile config files, so they should be written using the appropriate module system for Node.js. Note that\nin the following snippet, the `module.exports` syntax is used instead of `export default`.\n\n```javascript\nmodule.exports = {\n    schema: 'https://localhost:8000'\n}\n```\n\nTo use ESM in your configuration, add `\"type\": \"module\"` to your package.json file.\n\n### TypeScript\n\nTo load a TypeScript config, the `ts-node` package should be installed either locally in the project or globally. You can find the package\n[here](https://github.com/TypeStrong/ts-node).\n\nIf you use ESM modules in your project and have configured them in package.json as `\"type\": \"module\"`, you will also need to set up an ESM\nloader for `ts-node`. This process is described in detail [here](https://github.com/TypeStrong/ts-node#native-ecmascript-modules).\n\n```json5\n{\n    \"compilerOptions\": {\n        // or ES2015, ES2020\n        \"module\": \"ESNext\"\n    },\n    \"ts-node\": {\n        \"esm\": true\n    }\n}\n```\n\n## Migration\n\nIf you are using a legacy configuration file, such as `.graphqlconfig`, we recommend converting it to a modern format of your choice.\nSubjectively, YAML files are the most convenient for this purpose. An automatic conversion tool is available: simply open the legacy file in\nthe editor and press `Migrate` on the notification panel at the top of the editor. This will update the config keys and environment variable\nsyntax, but won't change the structure of the file. So, it's possible that you may still need to update some parts of the config manually.\n\nIt is recommended to migrate existing `includes` patterns that were previously used to configure compound schemas to the new `schema` key.\nAdditionally, please note that [environment variables](#environment-variables) now have a different syntax and support specifying a default\nvalue, for example.\n\n\u003e IMPORTANT: Starting from plugin version 4.0.0, schema configuration is strict \n\u003e and won't implicitly include any SDL definitions unless they are explicitly specified in the GraphQL Config.\n\nThe only exception to the above rule is an empty configuration file that may only contain the `extensions` key. \nThis configuration file will implicitly include any GraphQL file located under this directory.\n```yaml\nextensions:\n  endpoints:\n    dev: https://example.com/graphql\n```\n\n## Legacy configuration\n\nIf you still prefer to use a legacy configuration format (although we don't recommend it 😉), make sure to explicitly specify the paths to\nschema files in the `includes` property. Otherwise, only the types from `schemaPath` will be used for schema construction.\n\n```json5\n {\n    // a default way to provide a single-source schema\n    \"schemaPath\": \"schema.graphql\",\n    \"includes\": [\n        \"Types1.graphql\",\n        \"types/**/*.graphql\",\n        \"src/files/*.{graphql,js,ts}\",\n        \"everything/inside/**\"\n    ],\n    \"excludes\": [\n        \"types/excluded/**\"\n    ]\n}\n```\n\n## Environment variables\n\nYou can utilize environment variables in your configuration files to specify a schema path, URL, or a header value. The syntax for using\nenvironment variables in configuration files is as follows:\n\n```\n${VARIABLE_NAME}\n${VARIABLE_WITH_DEFAULT:./some/default/file.graphql}\n${VARIABLE_QUOTED:\"http://localhost:4000/graphql\"}\n```\n\nYou can load definitions from environment variables, with or without fallback values.\n\n```yaml\nschema: ${SCHEMA_FILE:./schema.json}\n```\n\nIf you want to define a fallback endpoint, you probably need to wrap your value with quotation marks.\n\n```yaml\nschema: ${SCHEMA_ENDPOINT:\"http://localhost:4000/graphql\"}\n```\n\n### .env files\n\nThere are several ways to provide environment variables. The most recommended method is to create a dedicated file with the variable values.\nTo avoid exposing your credentials, please refrain from committing this file.\n\nThe following filenames are supported in order of priority from top to bottom:\n\n- .env.local\n- .env.development.local\n- .env.development\n- .env.dev.local\n- .env.dev\n- .env\n\nThe plugin searches for the specified file starting from the directory containing the corresponding configuration file and going up to the\nproject root.\n\nIn such files, environment variables are represented as simple key-value pairs separated by the `=` sign. Values can optionally be enclosed\nin quotes.\n\n```\nS3_BUCKET=\"YOURS3BUCKET\"\nSECRET_KEY=YOURSECRETKEYGOESHERE # comment \nSECRET_HASH=\"something-with-a-#-hash\"\n```\n\n### Manual configuration\n\nIf you decide not to use .env files, you can provide environment variables manually for each configuration file. There are multiple ways to\naccomplish this.\n\n1. To edit GraphQL environment variables in a config file, open the file in the editor and right-click to open the context menu. Select\n   the `Edit GraphQL Environment Variables` action from the menu. This will open a modal dialog where you can provide values for each\n   environment variable in the file.\n2. You can open the same dialog by clicking on the [toolbar](#toolbar) inside any GraphQL file. The dialog will automatically find a\n   matching configuration file.\n3. Otherwise, only missing variables would be requested on the first introspection query or GraphQL request.\n\n### System\n\nIf no variables are found in the .env files or set manually, the plugin will attempt to retrieve them from your system environment.\n\n# Frameworks\n\n## Gatsby\n\nCreate a `graphql.config.js` at the root of your project with the following contents:\n\n```javascript\nmodule.exports = require(\"./.cache/typegen/graphql.config.json\")\n```\n\n\u003e NOTE: `.cache/typegen` directory shouldn't be excluded.\n\n# Introspection\n\nTo provide resolution, completion, and validation, a plugin requires a schema. This can be achieved by performing an introspection query,\nwhich should be configured beforehand. This process is described in a separate section dedicated to plugin configuration.\n\nThe easiest way to make an introspection query is to press the `Run` button on the editor's gutter if you're using YAML or JSON config\nfiles. This will make an introspection query and save a file locally, either to the IDE's cache or to the project sources, depending on the\nconfiguration.\n\n\u003e TIP: If you don't want to open the introspection result file after each query, you can disable it in the GraphQL\n\u003e options: `Languages \u0026 Frameworks \u003e GraphQL \u003e Open the editor with introspection result`.\n\nAnother way to perform the same query is by using `Run Introspection Query` from the [toolbar](#toolbar).\n\nAdditionally, you can obtain the same result from the GraphQL [tool window](#tool-window) by right-clicking on the endpoint and selecting\nthe `Get GraphQL Schema from Endpoint` action.\n\nTo inspect the schema structure of an introspection file in the editor, use the `Open Introspection Schema` action in\nthe [toolbar](#toolbar). This will open a file for the selected endpoint.\n\n## Rerun latest introspection\n\nIf your schema is constantly changing, and you find yourself repeatedly running the same introspection action against the same endpoint, it\nmay be more convenient to use the `Rerun Introspection Query` action. This can be found using the `Find Action` menu, which can be accessed\nby pressing `Cmd/Ctrl + Shift + A`. Note that this option only becomes available after you have already performed an introspection query. If\ndesired, you can also assign a hotkey to this action from the `Find Action` window.\n\n# Queries\n\nTo execute a query directly from the editor, place the caret on the query definition, and run the `Execute Query` action from the toolbar\neither manually or by using the `Ctrl/Cmd + Enter` hotkey. The query will be sent to a selected endpoint in the toolbar.\n\nIf your query has variables, you can open a dedicated variables editor using the `Toggle Variables Editor` action on the same toolbar. You\ncan then provide the variables in JSON format.\n\nAlternatively, you can create a GraphQL scratch file and use it as a playground for sending queries. The easiest way to create such a file\nand associate it with the correct GraphQL config is to use the GraphQL [tool window](#tool-window). Simply double-click on the endpoint node\nand choose `New GraphQL Scratch File.`\n\n## Scratch files\n\nIf a leading comment in a GraphQL scratch file contains a string that follows the pattern `# config=\u003cpath\u003e[!\u003coptionalProjectName\u003e]`, it will\nuse the specified config and project for resolving and type validation. Comments that follow this pattern are considered valid:\n\n```\n# config=/user/local/project/.graphqlrc.yml\n# config=/user/local/project/.graphqlrc.yml!backend\n```\n\n\u003e NOTE: it works only for queries and fragment definitions, type definitions in scratch files are ignored.\n\n# Toolbar\n\nGraphQL files have a toolbar that the plugin uses to provide access to the most commonly used actions in one place.\n\n![toolbar](/docs/assets/toolbar.png)\n\n- **Open Configuration File**: Open the corresponding configuration file, or create a new one if it does not exist.\n- **Edit Environment Variables**: This opens a dialog that allows you to provide values for environment variables that are defined in the\n  associated configuration file.\n- **Toggle Variables Editor**: This opens an editor window where you can provide query variables in JSON format.\n- **Endpoints list**: A list of known URLs is defined in a config file, which you can use to select a URL where the GraphQL queries should\n  go or from where the introspection should be fetched.\n- **Execute GraphQL**: Run a selected GraphQL query from the editor below.\n- **Run Introspection Query**: This action refreshes an introspected schema from the selected endpoint.\n- **Open Introspection Schema**: This command opens a local file that corresponding to a selected endpoint.\n\n# Tool window\n\nThe GraphQL tool window is used to provide an overview of your GraphQL projects. It can show validation errors, perform introspection\nqueries, create scratches, and more.\n\n![tool window](/docs/assets/toolwindow.png)\n\nThe main tab, `Schemas and Project Structure`, provides an overview of detected configuration files and the GraphQL schema associated with\neach of them. You can perform several useful actions for multiple nodes in this tree view.\n\n- **Schema discovery summary:** To search through the types discovered for each project, double-click on the corresponding node. This will\n  open a dialog window that enables you to search through every type and navigate to the place where they are defined.\n\n![types search](/docs/assets/types_search.png)\n\n- **Schema errors:** Clicking on the error node will navigate you to the source of the error.\n\n![schema errors](/docs/assets/schema_errors.png)\n\n- **Endpoints:** Right-clicking on the endpoint will give you the ability to make an introspection query or to create a Scratch file\n  associated with the selected configuration file and project.\n\n![endpoints](/docs/assets/endpoints.png)\n\n## Tool window toolbar\n\nTake a look at the toolbar on the left side of the Tool window. It provides some useful actions:\n\n- **Add Schema Configuration**: This feature allows you to create a configuration file in a selected directory, but it is added just for\n  convenience. Nothing prevents you from creating a configuration file through the Project View.\n- **Edit Selected Schema Configuration**: Opens a configuration file for the selected node in the tool window.\n- **Restart Schema Discovery**: This action clears all loaded schemas and starts the discovery process from scratch. It can be useful in\n  cases where cached data is causing issues.\n\n# Injections\n\n## Tagged template literals\n\nSupported tags are: `graphql`, `gql`, `Relay.QL`, `Apollo.gql`.\n\n```\nconst QUERY = gql``;\n```\n\n## IntelliJ default comment-based injection\n\n```\n// language=GraphQL\nconst QUERY = `query { field }`;\n```\n\n## C-style comments\n\n```\nconst QUERY = /* GraphQL */ `query { field }`;\n```\n\n## GraphQL comments\n\n```js\nconst QUERY = `\n    #graphql\n    \n    query { field }\n`;\n```\n\n# Acknowledgements\n\nThis plugin was heavily inspired by [GraphiQL](https://github.com/graphql/graphiql) from Facebook.\n\nA number of language features such as query and schema validation are powered\nby [graphql-java](https://github.com/graphql-java/graphql-java).\n\nA thanks also goes out to the [Apollo](https://github.com/apollographql) and [Prisma](https://github.com/prisma)  teams for their continued\nefforts to improve the GraphQL developer experience.\n\nAnd finally, a thank you to the [JetBrains WebStorm team](https://twitter.com/WebStormIDE) and the Alpha/Beta testers for all their help.\n\n# License\n\nMIT\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjetbrains%2Fjs-graphql-intellij-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjetbrains%2Fjs-graphql-intellij-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjetbrains%2Fjs-graphql-intellij-plugin/lists"}