GraphiQL (which you can pronounce as 'graphical') is the user interface for interacting with a GraphQL API. It is more or less equivalent to Swagger UI for a REST API. It is useful in that you can first write your GraphQL queries on GraphiQL and experiment with them and once ready, you can then copy the queries and use them in your code.

Here are some basics:

Typically, you will find the GraphiQL UI at, for example, http://localhost:8000/__graphql (in the case of Gatsby.js) or, if you are running your own Apollo Server, you can define this and typically would place it at /graphql.

Once you have written a query, you can execute it by pressing the 'Play' button, or by hitting CMD + Enter.

When you have typed in a field in your query pane, you can CMD + Click on the field and it will open the appropriate documentation in the documentation pane on far right. You can then click on the relevant links in order to browse through the available fields.

When typing a query, you can press tab in order to make use of the auto-complete from the intellisense menu.

By clicking the 'History' button up top, you can get a history of the all queries you have run and can click on them to execute them again or you can modify them if you choose.

When using queries that take parameters, you can clikc on the "Query Variables" button at bottom left and it will open a pane when you can assign your query variables via JSON syntax.

GraphiQL is an invaluable tool when working with a GraphQL API.