Developing GraphQL Queries Using pos-cli gui

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

pos-cli 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 pos-cli 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 pos-cli gui is a two-step process:

Step 1: Start pos-cli gui serve


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

Note

Replace staging with the environment name you want to develop on. To list all available environments use pos-cli env list

Step 2: Write / update query

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

You will be greeted with the graphiql editor.

Screenshot of the graphiql editor

Tips

  • On the right side, you can open sidebar with graphql schema documentation.
  • When you don't 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.