Features

Featured Plugin: JS GraphQL

Note: This post was updated in August 2021.

The JS GraphQL plugin is one the most popular plugins for WebStorm, IntelliJ IDEA, and other JetBrains IDEs. We want to thank Jim Meyer for the amazing work he did to build this plugin, which is now being maintained by our team.

In this blog post, we’ll have a close look at some of the key features available with this plugin and how it can help you work with GraphQL in your JavaScript apps. To get started, install the plugin from Preferences / Settings | Plugins – Marketplace.

Working with schema files

The plugin brings full support for the GraphQL Schema Definition Language (SDL). That means your .graphql file will include syntax highlighting, and as you start typing you will get suggestions for keywords, built-in and custom types, interfaces, and enums.

working-with-schema-files

Press or Ctrl and click the type name to navigate to its definition.

The plugin will check that all the types you’ve used are defined somewhere in the file, and it will show an error message if they’re not. Press ⌥↵ / Alt+Enter to fix the problem with one of the available quick-fixes.

fix-type-error

All the familiar features like commenting, folding, brace matching, formatting, quick documentation, Find Usages, and Rename work for the GraphQL schema language.

If your schema is described in the template string in the .js or .ts file, you can use a tagged string (const typeDefs = graphql``) or you can press ⌥↵ / Alt+Enter and then select Inject language – GraphQL to enable coding assistance.

inject-graphql-manually

You can also use a comment to inject GraphQL in a template string. Either type #graphql inside the string or /* GraphQL */ just before the opening backtick.

inject-graphql-with-comment

Working with queries and mutations

When you write GraphQL queries or mutations inside template strings in your JavaScript or TypeScript files, you will get full schema-aware code completion for types, fields, and arguments. ⌘+click or Ctrl+click will take you to the definition in the schema file. If you press F1 / Ctrl+Q or hover over a symbol, you can see the quick documentation for that symbol.

graphql-code-completion

Find Usages and the Rename refactoring will also work as you would expect them to.

Describing the environment

The JS GraphQL plugin relies on the .graphqlconfig file for information about your development environment. In this file you can specify the GraphQL endpoints, the location of the schema file, and the files included and excluded from the scope of the schema.

If you have a more complex project with multiple schemas, you can create separate .graphqlconfig files (File – New… – GraphQL Configuration File) in each part of your app to configure them.

The GraphQL tool window displays information about your schemas and endpoints based on these configuration files. It will also show any errors after running a query against the endpoint.

graphql-environment

Configuration recipes

In the graphql-config-examples repository, you can find instructions for using the .graphqlconfig files to set up different types of projects that use GraphQL, including an Apollo full-stack app and a Relay app.

Doing introspection

Once you’ve specified the endpoints for your GraphQL server in the configuration file, you can now run introspection, which will ask the server to generate the schema and provide information about what queries it supports. The result of introspection will be saved in the file specified in the schemaPath file in .graphqlconfig.

To run introspection, double-click the endpoint in the GraphQL tool window and select Get GraphQL Schema from Endpoint (introspection).

graphql-introspection

Using environment variables from your .env file

In your GraphQL config, you can access environment variables from your .env file. For example, a variable named API_URL can be referenced like this:

"url": "${env:API_URL}"

Here, “url” is the property, and "${env:API_URL}" is the value. If the referenced variable is not declared in your .env file when you run introspection, you’ll get a prompt asking you to enter the missing variable, in this case, API_URL. Doing this from the prompt will only make the variable available until the IDE is restarted, and won’t save it in your .env file.

graphql-env-variable

Running queries

You can easily run a query for a specific endpoint. You need a file with a .graphql extension in which you can write your query. This can be a regular file in your project or a temporary scratch file. At the top of the file, select the endpoint that you want to use to run your query, and then click the green icon to run it. You’ll see the result in the new Query result tab in the GraphQL tool window.

running-queries

You can also create a new scratch file for your query from the tool window. Just double-click on the endpoint and select the corresponding action.

That’s it for now! The JSGraphQL plugin is open source and available on GitHub, where you can also submit any bug reports and feature requests. Your contributions to the plugin and its documentation are very welcome!

The WebStorm team

Comments below can no longer be edited.

15 Responses to Featured Plugin: JS GraphQL

  1. Avatar

    Oscar says:

    April 18, 2019

    This plugin is a must to work with Gatsby!

  2. Avatar

    Carlton Dickson says:

    May 23, 2019

    Was using PHP and running the built in web server…

    “`
    php -S localhost:
    “`

    but kept getting this error when trying to run introspect query…

    “`
    GraphQL Query Error
    http://localhost:8084/graphql.php: Connection refused (Connection refused)
    “`

    Apparently the localhost command starts server with ipv6 support only. The following worked for me
    “`
    php -S 127.0.0.1:
    php -S 0.0.0.0:
    “`

    See here for more details – https://www.php.net/manual/en/features.commandline.webserver.php#120449

  3. Avatar

    Cesar Martinez says:

    November 10, 2019

    Anyone knows how to make this work, or how to work with this within a Meteor-Apollo project?

  4. Avatar

    Andrew says:

    March 13, 2020

    This plugin is awesome, the only thing I’m missing is the request history. So it would save previous sets of query variables similar to how it’s done in GraphQL playground. Is there any way to make it work or will it be implemented in future versions?

    • Ekaterina Ryabukha

      Ekaterina Ryabukha says:

      March 16, 2020

      Hello Andrew,
      This third-party plugin is open source and available on GitHub, where you can submit any bug reports/feature requests as well as contribute to its development. A new feature request can be submitted here: https://github.com/jimkyndemeyer/js-graphql-intellij-plugin/issues. Please let us know if you have any other questions.

  5. Avatar

    sejisok says:

    March 16, 2020

    WebStorm need to add official support for GraphQL that integrates directly with the framework they support, like Angular (Apollo Angular) etc.

  6. Avatar

    Jarek says:

    March 27, 2020

    Does this work with @client directive?

  7. Avatar

    Alexander Gavazov says:

    April 7, 2020

    Very useful, but support for Apollo Federation needs to be optimized because there are extend and duplicate types, mutations, queries …
    It would be great if you add an option of not highlighting at least the errors because the syntax is correct but it is marked as wrong.

  8. Avatar

    ryota says:

    May 16, 2020

    How to show Query result tab after creating .graphql file from different file extension?