The StepZen Schema Explorer

StepZen's Schema Explorer provides a variety of tools that make it easy to build, deploy, and test a GraphQL API on StepZen. With Schema Explorer you can:

• Construct your GraphQL queries using the Code Explorer.
• Import a schema template.
• Format your queries.
• Search your query history.
• Explore the schema for your GraphQL API.
• Generate frontend boilerplate code for use in your application.

Note: In order to use Schema Explorer, you need to have deployed a schema to StepZen using the stepzen start command. Schema Explorer will be available on http://localhost:5001 once the schema has been successfully deployed:

The following subsections describe various aspects and features of Schema Explorer's UI:

• Query Editor
• Code Explorer
• Prettify
• History
• Documentation Explorer

Query Editor

Your primary interaction with Schema Explorer will likely be with its query editor. The query editor enables you to create queries with automatic code hinting and then run them against your deployed StepZen API. Begin by typing a query in the editor pane on the left. Click the play button/right arrow above the query editor to see the results in the Results pane on the right.

Code Explorer

The Code Explorer tab provides you with an easy interface to construct queries. Click Explorer to open the tab:

You can add queries to the query editor. Edit which fields appear in the query by checking and un-checking their corresponding boxes.

If you take a closer look at Schema Explorer, you can see a copy icon next to your query. This enables you to make a copy of your current query in Schema Explorer:

There's also the option to create a GraphQL fragment based on your current query, by clicking on the little box to the right of the query with the ellipses on it:

Prettify

The Prettify button cleans up the formatting of your query code to improve readability.

For example, you can go from a query formatted like this:

To this:

History

To revert back to a previously made query, click History to open the History tab with your previously submitted queries:

You can edit the name of the query by clicking the pencil icon that appears when you hover over a specific query. You can also mark a query from your history as a favorite by clicking the star icon.

Export

StepZen Export provides you with the boilerplate code you need to consume data from a variety of frontends (currently it supports Apollo Client or Gatsby).

For example, if you have the following query in the query editor:

query MyQuery {
  breedById(id: "abys") {
    catCountry {
      name
      population
      region
      subregion
    }
    id
    imperial_weight
    life_span
  }
}

Clicking Export enables you to select code for Apollo Client or Gatsby. For example, if you choose the Apollo/useQuery hook:

import { gql, useQuery } from '@apollo/client';

const GET_QUERY = gql`
  query MyQuery   {
    breedById(id: "abys") {
      catCountry {
        name
        population
        region
        subregion
      }
      id
      imperial_weight
      life_span
    }
  }
`;

function ComponentName() {
  const { loading, error, data } = useQuery(GET_QUERY);

  if (loading) return <p>Loading ...</p>;

  if (error) return (
    <pre>{JSON.stringify(error, null, 2)}</pre>
  );

  return (
    <pre>{JSON.stringify(data, null, 2)}</pre>
  );
}

export default ComponentName

For Gatsby, you can choose either Page query, StaticQuery hook, or StaticQuery. Here's an example of the output for Page query:

import React from "react"
import { graphql } from "gatsby"

const ComponentName = ({ data }) => <pre>{JSON.stringify(data, null, 4)}</pre>

export const query = graphql`
  {
    breedById(id: "abys") {
      catCountry {
        name
        population
        region
        subregion
      }
      id
      imperial_weight
      life_span
    }
  }
`

export default ComponentName

This provides boilerplate code that you can edit, to help you get your application's frontend up and running faster.

Documentation Explorer

Click Docs at the top right-hand corner to expand the Documentation Explorer. Generally, this will only show a root type of "Query" for StepZen APIs. Clicking on the query type shows a list of all the queries available within this schema. Clicking on the return type of a query shows the details of that GraphQL type, including the properties and their types.