GraphQL IntelliJ Plugin

Before using the plugin, ensure you have the following:

1. GraphQL Knowledge: Familiarity with the GraphQL language is assumed.
2. GraphQL Client/Server: While the plugin works out of the box with popular clients like Apollo GraphQL and Relay, it is compatible with any client or server framework you choose.

The plugin's language features (completion, error highlighting, documentation) depend entirely on how schema types are discovered. The discovery method depends on your project structure:

Single-schema projects

By default, the plugin assumes a single schema and automatically processes:

• All .graphql files in the "Project files" scope.
• Injected GraphQL strings in JavaScript/TypeScript files (.js, .jsx, .ts, .tsx) using Tagged Template Literals with the following tags: graphql, .gql, or Relay.QL.

Multi-schema projects

For projects with multiple schemas, you must configure specific scopes to prevent type collisions (where types appear to be declared multiple times) and to ensure validation only recognizes types belonging to the current schema. You can configure these scopes using graphql-config v2 files with includes and excludes glob patterns.

GraphQL scratch files serve as a playground for sending queries. To create one:

1. Open the GraphQL tool window.
2. Double-click an endpoint node.
3. Select New GraphQL Scratch File.

Configuring Scratch Files

You can manually associate a scratch file with a specific configuration and project by adding a leading comment following this pattern: # config=<path>[!<optionalProjectName>]

Valid examples:

# config=/user/local/project/.graphqlrc.yml
# config=/user/local/project/.graphqlrc.yml!backend

Note: This configuration only applies to queries and fragment definitions; type definitions within scratch files are ignored.

# config=/user/local/project/.graphqlrc.yml

query { 
  user { id }
}

GraphQL scratch files allow you to write and execute temporary queries or mutations against your GraphQL endpoints outside of your production code.

To use them:

1. Create a .graphqlconfig file (Right-click project base dir -> "New" -> "GraphQL Configuration File").
2. Define your endpoint details in the config file.
3. Open a scratch file. If you have an existing config, you can jump to it using the "Edit .graphqlconfig" toolbar button in the top left of the scratch file editor.

You can use .js or .ts files for configuration. This requires Node.js to be installed and configured in your IDE. Note that these configurations will not work in Community editions of JetBrains IDEs.

JavaScript/CommonJS: Use module.exports for standard Node.js configuration.

ESM: To use ESM, add "type": "module" to your package.json.

TypeScript: Requires ts-node to be installed locally or globally. If using ESM with TypeScript, you must configure the ts-node ESM loader in your tsconfig.json.

// JavaScript (CommonJS)
module.exports = {
    schema: 'https://localhost:8000'
}

// tsconfig.json for TypeScript ESM
{
    "compilerOptions": {
        "module": "ESNext"
    },
    "ts-node": {
        "esm": true
    }
}

You can run GraphQL queries directly from your editor files. Place the caret on the query definition and use one of the following methods:

1. Toolbar: Click the Execute GraphQL action in the GraphQL file toolbar.
2. Hotkey: Press Ctrl/Cmd + Enter.

The query is sent to the endpoint currently selected in the toolbar. If your query requires variables, use the Toggle Variables Editor action in the toolbar to provide them in JSON format.

// Place caret on the query and press Ctrl/Cmd + Enter
query GetUser($id: ID!) {
  user(id: $id) {
    name
  }
}

The GraphQL plugin provides language support for WebStorm, IntelliJ IDEA, and other IntelliJ Platform IDEs. You can install it via the JetBrains Marketplace or directly within your IDE.

Steps to install via IDE:

1. Open your IDE.
2. Navigate to File | Settings/Preferences | Plugins.
3. Select the Marketplace tab.
4. Search for graphql.
5. Select the GraphQL suggestion and click install.

You can install the plugin directly within your JetBrains IDE using the Marketplace.

1. Open the Settings (or Preferences on macOS) dialog.
2. Navigate to the Plugins section.
3. Select the Marketplace tab.
4. Search for graphql.
5. Select the JS GraphQL suggestion and click Install.

To enable schema discovery and define GraphQL endpoints within your project, use a .graphqlconfig file. This allows the plugin to automatically identify your GraphQL schemas and associate them with specific endpoints for features like autocomplete and validation.

For practical implementation patterns, refer to the official example repository.

https://github.com/jimkyndemeyer/graphql-config-examples/