The StepZen Schema Explorer

Test and query your GraphQL API deployed to StepZen from your browser.

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:

schema 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.

query editor

Code Explorer

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

schema explorer

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.

GraphQL fragment

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.

GraphQL fragment

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:

ugly code

To this:

pretty code

History

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

history tab

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:

template list

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

keys

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

confirm

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.

This site uses cookies: By using this website, you consent to our use of cookies in accordance with our Website Terms of Use and Cookie Policy.