Developing GraphQL Queries Using marketplace-kit gui

Last edit: 

Contributors: 

This guide will help you quickly develop GraphQL queries using the marketplace-kit gui serve command.

marketplace-kit gui serve command is very useful when:

  1. You are developing a new query and you want to be sure it is working - it communicates with the database directly, so you are eliminating errors stemming from other layers and features of the system.

  2. You are debugging an error - because you have direct control over a query and instant feedback after your changes, you can strip everything that you don't need, manipulate arguments passed, etc.

Requirements

So that you can follow the steps in this tutorial, you have to have the Marketplace Kit installed, an environment configured, and the codebase set up. You should be familiar with Pages, and the technologies behind platformOS, especially Liquid.

Steps

Developing GraphQL queries using marketplace-kit gui is a two-step process:

  1. Start marketplace-kit gui serve
  2. Write / update query

Step 1: Start marketplace-kit gui serve


marketplace-kit gui serve staging
Server is listening on 3333
Resources Editor: http://localhost:3333/gui/editor
GraphQL Browser: http://localhost:3333/gui/graphql

Step 2: Write / update query

To write your query go to the second link: http://localhost:3333/gui/graphql

You will be greeted with graphiql editor.

Graphiql editor

Tips

  • On the right side you can open sidebar with graphql schema documentation.
  • When you dont know what to type, try pressing ctrl + space - this will open the suggestion box and usually help you decide.
  • To quickly run the query, press ctrl + enter (or cmd + enter on a Mac).
  • To pass arguments to a query, open Query variables panel on the bottom and write them in JSON format (see image above)

Questions?

We are always happy to help with any questions you may have. Check out our Help page, or contact us.