The StepZen Schema Explorer

The StepZen Schema Explorer provides a variety of tools that make it easy to build, deploy and test a GraphQL API on StepZen.

• 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

In order to use the Schema Explorer, you need to have deployed a schema to StepZen using the stepzen start command. The Schema Explorer will open in a browser tab 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 the Schema Explorer will likely be with the query editor. The query editor allows 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 and then click the run button (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 on the "Explorer" button to open the tab.

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

If you take a closer look at the Explorer, you can see a copy icon next to your query. This will allow you to make a copy of your current query in the Explorer.

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

Prettify

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

You can go from a query formatted like this:

To this:

History

To revert back to a previously made query, click the History button 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 favorite a query from your history by clicking the star icon.

Import

To insert a schema template directly into your stepzen folder, click Beta -> Schema Templates.

The template list will pop up:

Select a template, for example OpenWeatherMap, and you'll be given the option to use StepZen default keys or your own keys:

Click 'configure' and then 'generate'. Once the schema code has been generated you will see a confirmation message.

Inside your project folder you'll find the generated schema code. For example, if you generated OpenWeatherMap, you'll see an openweathermap schema directory inside your StepZen folder, ready to use!

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 had the following query in the query editor:

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

Clicking on Export will allow you to select code for Apollo Client or Gatsby. For example, if you choose 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 will help you get the frontend of your application up and running faster by giving you boilerplate code that you can edit.

Documentation Explorer

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