Featured Plugin: JS GraphQL
The JS GraphQL plugin is one the most popular plugins for WebStorm, IntelliJ IDEA, and other JetBrains IDEs, and we are very excited about the release of its second version.
We want to thank Jim Meyer, the author of the plugin, for the amazing work he has done to build this plugin!
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 the keywords and built-in and custom types, as well as interfaces and enums.
Cmd/Ctrl-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.
All the familiar features like commenting, folding, brace matching, formatting, quick documentation, as well as 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.
Working with queries and mutations
Find usages and the Rename refactoring will also work as you would expect them to.
Describing the environment
For the information about your development environment, the JS GraphQL plugin relies on the .graphqlconfig file. In this file you can specify the GraphQL endpoints, the location of the schema file, as well as 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 (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.
In the graphql-config-examples repository, you can find recipes describing how to use the .graphqlconfig files to set up different types of projects that use GraphQL, including an Apollo full-stack app and a Relay app.
Once you’ve specified the endpoints for your GraphQL server in the configuration file, you can now run introspection – it 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).
If you want to run a query for a specific endpoint, you can do it easily. What you need is a file with a .graphql extension (it can be a regular file in your project or a temporary scratch file) in which you can write your query. On 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.
You can also create a new scratch file for your query from the tool window – double-click on the endpoint and select the corresponding action.
To install the JS GraphQL plugin, go to the IDE’s Preferences/Settings | Plugins – Marketplace and search for JS GraphQL.
The 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