Skip to content

Commit c7b8177

Browse files
authored
Update README.md
1 parent 599fbb4 commit c7b8177

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,31 @@ The plugin works out of the box with popular GraphQL clients such as [Apollo Gra
1111
The plugin is published to the [JetBrains Plugin Repository](https://plugins.jetbrains.com/plugin/8097-js-graphql).
1212
You can install it directly from your IDE via the `File | Settings/Preferences | Plugins` screen.
1313
On the `Marketplace` tab simply search for `graphql` and select the `GraphQL` suggestion:
14+
1415
![marketplace](docs/assets/marketplace.png)
1516
## Developer guide
1617
This developer guide covers how to setup your project to get the most out of the GraphQL language tooling in this plugin.
1718

1819
The main features of the plugin are:
1920
- Full language support for GraphQL Specification including the Schema Definition Language (SDL)
2021
- Schema-aware completion, error highlighting, code-formatting, folding, commenter, and brace-matching and documentation
22+
2123
![completion](docs/assets/completion.png)
2224

2325
![docs](docs/assets/docs.png)
2426
- The plugin [discovers your local schema](#project-structure-and-schema-discovery) on the fly. Remote schemas are easily fetched using introspection. Introspect GraphQL endpoints to generate schema declaration files using the GraphQL Type System Definition Language
2527
- Support for [multi-schema projects](#setting-up-multi-schema-projects-using-graphql-config) using configurable project scopes or graphql-config files Schema discovery is configured using [graphql-config v2](https://github.com/kamilkisiela/graphql-config/tree/legacy) files, including support for multi-schema projects
2628
- Built-in support for [Relay](https://facebook.github.io/relay/) and [Apollo](https://www.apollographql.com/) projects: `graphql` and `gql` tagged template literals in JavaScript and TypeScript are automatically recognized as GraphQL
2729
- Execute queries using variables against configurable endpoints, including support for custom headers and environment variables
30+
2831
![run](docs/assets/run.png)
2932
- `Find Usages` and `Go to Declaration` for schema types, fields, and fragments
33+
3034
![usages](docs/assets/usages.png)
3135
- `Structure view` to navigate GraphQL files
3236
- Load variables from shell or `.env` files. Supported file names: `.env.local`,`.env.development.local`,`.env.development`,`.env.dev.local`,`.env.dev`,`.env`
3337
- Built-in Relay and Apollo Federation type definitions (You need to enable it in settings)
38+
3439
![federation](docs/assets/federation.png)
3540

3641
The most important aspect of using the plugin is to configure how 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.
@@ -101,12 +106,14 @@ See https://github.com/kamilkisiela/graphql-config/tree/legacy#specifying-endpoi
101106

102107
The following example is from graphql-config-examples/remote-schema-introspection
103108
It demonstrates how to use the endpoints configured in `.graphqlconfig` to fetch an existing remote schema.
109+
104110
![config](docs/assets/config.png)
105111
With `introspect: true` the plugin asks at project startup whether to update the local schema using the configured endpoint.
106112

107113
The update works by sending an introspection query to the endpoint, and then writing the result to the configured schemaPath.
108114

109115
Introspection queries can also be executed by double-clicking endpoints in the schemas tree view:
116+
110117
![introspect](docs/assets/introspect-double-click.png)
111118
Notes and comments:
112119
- 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 that setup the plugin immediately discovers your schema, and you don't have to perform an introspection after server schema changes.

0 commit comments

Comments
 (0)