Plugin javascript phpstorm

GraphQL language support for WebStorm, IntelliJ IDEA and all other . The plugin works with all IDEs in the IntelliJ Platform.

Prerequisites & Installation

Prerequisites

The plugin and this documentation assume you are already familiar with the GraphQL language. If you're not, please visit the official graphql.org website first. The plugin works out of the box with popular GraphQL clients such as Apollo GraphQL and Relay, but you're free to choose your client and server framework.

Installation

The plugin is available from JetBrains Marketplace. You can install it directly from your IDE via the File | Settings/Preferences | Plugins screen. On the Marketplace tab simply search for graphql and select the

- project root/
    - .graphqlconfig <-----
    - product a (schema one)/
        - schema files and graphql aware components
    - product b (schema two)/
        - schema files and graphql aware components

0 suggestion:

Developer guide

This developer guide covers how to set up your project to get the most out of the GraphQL language tooling in this plugin.

The main features of this plugin include:

• Full language support for GraphQL Specification including the Schema Definition Language (SDL).

• Schema-aware completion, error highlighting, and documentation.

• Syntax highlighting, code-formatting, folding, commenter, and brace-matching.

• The plugin on the fly. Remote schemas are easily fetched using introspection. You can introspect GraphQL endpoints to generate schema declaration files using the GraphQL Type System Definition Language.

• Support for using configurable project scopes or

  - project root/
      - .graphqlconfig <-----
      - product a (schema one)/
          - schema files and graphql aware components
      - product b (schema two)/
          - schema files and graphql aware components
  

  1 files. Schema discovery is configured using graphql-config v2 files, which includes support for multi-schema projects.

• Built-in support for Relay and Apollo projects: graphql and

  - project root/
      - .graphqlconfig <-----
      - product a (schema one)/
          - schema files and graphql aware components
      - product b (schema two)/
          - schema files and graphql aware components
  

  3 tagged template literals in JavaScript and TypeScript are automatically recognized as GraphQL.

• Execute queries using variables against configurable endpoints, including support for custom headers and environment variables.

• - project root/
      - .graphqlconfig <-----
      - product a (schema one)/
          - schema files and graphql aware components
      - product b (schema two)/
          - schema files and graphql aware components
  

  4 and

  - project root/
      - .graphqlconfig <-----
      - product a (schema one)/
          - schema files and graphql aware components
      - product b (schema two)/
          - schema files and graphql aware components
  

  5 for schema types, fields, and fragments.

• - project root/
      - .graphqlconfig <-----
      - product a (schema one)/
          - schema files and graphql aware components
      - product b (schema two)/
          - schema files and graphql aware components
  

  6 to navigate GraphQL files

• Load variables from shell or

  - project root/
      - .graphqlconfig <-----
      - product a (schema one)/
          - schema files and graphql aware components
      - product b (schema two)/
          - schema files and graphql aware components
  

  7 files. Supported file names:

  - project root/
      - .graphqlconfig <-----
      - product a (schema one)/
          - schema files and graphql aware components
      - product b (schema two)/
          - schema files and graphql aware components
  

  8,

  - project root/
      - .graphqlconfig <-----
      - product a (schema one)/
          - schema files and graphql aware components
      - product b (schema two)/
          - schema files and graphql aware components
  

  9,

  {
    "projects": {
      "product a": {
        "includes": ["product a (schema one)/**"]
      },
      "product b": {
        "includes": ["product b (schema two)/**"]
      }
    }
  }

  0,

  {
    "projects": {
      "product a": {
        "includes": ["product a (schema one)/**"]
      },
      "product b": {
        "includes": ["product b (schema two)/**"]
      }
    }
  }

  1,

  {
    "projects": {
      "product a": {
        "includes": ["product a (schema one)/**"]
      },
      "product b": {
        "includes": ["product b (schema two)/**"]
      }
    }
  }

  2,

  - project root/
      - .graphqlconfig <-----
      - product a (schema one)/
          - schema files and graphql aware components
      - product b (schema two)/
          - schema files and graphql aware components
  

  7

• Built-in

  {
    "projects": {
      "product a": {
        "includes": ["product a (schema one)/**"]
      },
      "product b": {
        "includes": ["product b (schema two)/**"]
      }
    }
  }

  4,

  {
    "projects": {
      "product a": {
        "includes": ["product a (schema one)/**"]
      },
      "product b": {
        "includes": ["product b (schema two)/**"]
      }
    }
  }

  5, and

  {
    "projects": {
      "product a": {
        "includes": ["product a (schema one)/**"]
      },
      "product b": {
        "includes": ["product b (schema two)/**"]
      }
    }
  }

  6 type definitions (You need to enable it in

  {
    "projects": {
      "product a": {
        "includes": ["product a (schema one)/**"]
      },
      "product b": {
        "includes": ["product b (schema two)/**"]
      }
    }
  }

  7).

It is important to configure how the schema types are discovered. If the schema types are not discovered correctly, language features such as completion and error highlighting will be based on the wrong type information.

Schemas and their types are declared using GraphQL Type System Definition Language, which is also widely known as GraphQL Schema Definition Language (often abbreviated as SDL). If you're authoring your schemas in SDL, the plugin provides the following features:

• Completion for types when defining fields, arguments, implemented interfaces, and so on.
• Error highlighting of schema errors such as unknown types, wrong use of types, and missing fields when implementing interfaces.
• Find usages in SDL and refactoring such as rename, which will update the relevant queries, mutations, and so on.

For use cases where you don't declare the schema in the project, an introspection query can be executed against a GraphQL endpoint URL to write the schema to a .graphql file as SDL. See .

Project Structure and Schema Discovery

By 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 terms of schema discovery. For a single-schema project, schema types are discovered as follows: All

{
  "projects": {
    "product a": {
      "includes": ["product a (schema one)/**"]
    },
    "product b": {
      "includes": ["product b (schema two)/**"]
    }
  }
}

8 files in the "Project files" scope are processed for type definitions, which are added to a singleton type registry. If the IDE has JavaScript language support, injected GraphQL strings in the

{
  "projects": {
    "product a": {
      "includes": ["product a (schema one)/**"]
    },
    "product b": {
      "includes": ["product b (schema two)/**"]
    }
  }
}

9 scope are processed for all JavaScript file types. File extensions include

const QUERY = gql``;

0,

const QUERY = gql``;

1,

const QUERY = gql``;

2, and

const QUERY = gql``;

3 Injected GraphQL is found based on

const QUERY = gql``;

4 with one of the following tags: graphql,

const QUERY = gql``;

6, or

const QUERY = gql``;

7. For projects with multiple schemas, developers have to configure a scope for each schema. The purpose of a schema-specific scope is to prevent types from being picked up in more than one GraphQL type registry, which would likely result in validation errors. This is because these types will appear to have been declared more than once. In addition, the scopes prevent non-conflicting types from showing up in completions and ensure that validation only recognizes the types that belong to the current schema. The plugin allows you to configure your schema scopes using

const QUERY = gql``;

8 configuration files with

const QUERY = gql``;

9 and

// language=GraphQL
const QUERY = `query { field }`;

0 glob patterns.

Setting up Multi-schema Projects using graphql-config

Please familiarize yourself with the graphql-config v2 format before proceeding. The next step is to decide where to place the

// language=GraphQL
const QUERY = `query { field }`;

1 file. The config file controls schema discovery from the directory it's placed in, as well as any subfolders that don't have their own

// language=GraphQL
const QUERY = `query { field }`;

1. To create a

// language=GraphQL
const QUERY = `query { field }`;

1 file, right-click a folder and select

// language=GraphQL
const QUERY = `query { field }`;

4 or use the "+" button in the

// language=GraphQL
const QUERY = `query { field }`;

5 window tab named

// language=GraphQL
const QUERY = `query { field }`;

6 and

// language=GraphQL
const QUERY = `query { field }`;

7. Depending on your preference, you can use a single

// language=GraphQL
const QUERY = `query { field }`;

1 file in a folder that is a parent to each schema folder, or you can place

// language=GraphQL
const QUERY = `query { field }`;

1 files in each schema folder.

Option A: Multiple config files (recommended):

- project root/
    - product a (schema one)/
        - .graphqlconfig <-----
        - schema files and graphql aware components
    - product b (schema two)/
        - .graphqlconfig <-----
        - schema files and graphql aware components

With this approach the location of the config files creates separate scopes for the two schemas.

Option B: Single config file:

- project root/
    - .graphqlconfig <-----
    - product a (schema one)/
        - schema files and graphql aware components
    - product b (schema two)/
        - schema files and graphql aware components

With a single config file you need to separate the schemas using the

const QUERY = gql``;

9 globs of the projects field:

{
  "projects": {
    "product a": {
      "includes": ["product a (schema one)/**"]
    },
    "product b": {
      "includes": ["product b (schema two)/**"]
    }
  }
}

See https://github.com/jimkyndemeyer/graphql-config-examples for example of uses of

// language=GraphQL
const QUERY = `query { field }`;

1 to control schema discovery.

Working with GraphQL Endpoints and Scratch Files

You can use GraphQL scratch files to work with your schema outside product code, for example, for writing temporary queries to test resolvers. To run queries or mutations against your GraphQL endpoint, add your endpoint details to a

// language=GraphQL
const QUERY = `query { field }`;

1 file. If you don't already have a config file, you can create one by right-clicking on your project base dir and choosing

const QUERY = /* GraphQL */ `query { field }`;

3. If you already have a config file, you can jump to it using the

const QUERY = /* GraphQL */ `query { field }`;

4 toolbar button in the top left of the scratch file editor. See for the expected format of the endpoint details such as the URL, headers, and so on. The following example is from graphql-config-examples/remote-schema-introspection. It demonstrates how to use the endpoints configured in

// language=GraphQL
const QUERY = `query { field }`;

1 to fetch an existing remote schema.

With

const QUERY = /* GraphQL */ `query { field }`;

6 the plugin asks at project startup whether to update the local schema using the configured endpoint.

The update works by sending an introspection query to the

const QUERY = /* GraphQL */ `query { field }`;

7, and then writing the result to the configured

const QUERY = /* GraphQL */ `query { field }`;

8.

Introspection queries can also be executed by double-clicking

const QUERY = /* GraphQL */ `query { field }`;

9 in the schemas tree view:

Notes and comments: If you're both developing the server schema and consuming it in a client, e.g. via component queries, you'll get the best tooling by having your schema expressed using GraphQL Schema Definition Language directly in your project. With this setup, the plugin immediately discovers your schema and you don't have to perform an introspection after the server schema changes.

Tip: The re-run introspection action can be bound to a keyboard shortcut for convenience and if you do make sure to uncheck this option as it stops opening the introspection result file in the IDE (after pressing the shortcut):

Injections

Tagged template literals

Supported tags are: graphql,

- project root/
    - .graphqlconfig <-----
    - product a (schema one)/
        - schema files and graphql aware components
    - product b (schema two)/
        - schema files and graphql aware components

3,

const QUERY = gql``;

7,

const QUERY = `
    #graphql
    
    query { field }
`;

3.

const QUERY = gql``;

IntelliJ default comment-based injection

// language=GraphQL
const QUERY = `query { field }`;

C-style comments

const QUERY = /* GraphQL */ `query { field }`;

GraphQL comments

const QUERY = `
    #graphql
    
    query { field }
`;

Acknowledgements

This plugin was heavily inspired by GraphiQL from Facebook.

A number of language features such as query and schema validation are powered by graphql-java.

A thanks also goes out to the Apollo and Prisma teams for their continued efforts to improve the GraphQL developer experience.

And finally, a thank you to the JetBrains WebStorm team and the Alpha/Beta testers for all their help.

Can I write JavaScript in PhpStorm?

How to enable jQuery in PhpStorm?

How to minify JavaScript PhpStorm?