Intro to the Voyager client

GraphQL API for WordPress provides the GraphQL Voyager client to visualize the GraphQL schema interactively. Access it by clicking on "Interactive Schema" on the plugin's menu:

GraphQL Voyager client
GraphQL Voyager client

Voyager provides a birds-eye view of the GraphQL schema:

Visualizing the schema for querying data
Visualizing the schema for querying data

It makes it simple to understand how all elements in the schema relate to each other, using arrows to show the connections between types:

Schema-elements
Schema-elements

The schema has a starting point, i.e. a type from which all relationships are calculated. By default, this is the query root (in this case, handled via the QueryRoot type), which is indicated in the floating panel at the bottom. To visualize the schema concerning mutations, we can select the corresponding mutation root type (in this case, MutationRoot):

GraphQL types, on the floating panel
GraphQL types, on the floating panel

Switching view from another GraphQL type
Switching view from another GraphQL type

Switched to view from the mutation root
Switched to view from the mutation root

Clicking on a type on the schema will highlight its connections, and display the metadata for its fields (the same outcome happens when clicking on the type's name on the left-side panel):

Highlighting type
Highlighting type

The search input on the left-side panel enables to filter the schema elements:

Filtering schema elements
Filtering schema elements

Clicking on a connection will highlight it, both in the schema and on the left-side panel:

Highlighting connection
Highlighting connection

We can use the mouse (and, to some extent, the buttons on the bottom-right of the screen) to navigate the graph, zooming in and out, moving in any direction, and focusing on elements:

Navigating the graph
Navigating the graph

On the floating panel on the bottom, we have a few additional options:

  • "Sort by alphabet" alphabetically sorts all fields in each type
  • "Skip Relay" removes Relay's wrapper classes
  • "Skip deprecated" hides all deprecated fields
  • "Show leaf fields" displays all fields which are not a connection

Additional options
Additional options