Apollo GraphQL Sandbox

2 min readDec 14, 2022

Prerequisites

This blog post is not GraphQL fundamental introduction. The assumption is that you already know GraphQL schema concept, Schema definition language (SDL) and graphQL server.

Apollo, graphql-ruby, Juniper, gqlgen, and Lacinia are some popular GraphQL implementations.

A schema is like a contract between the server and the client. It defines what a GraphQL API can and can’t do, and how clients can request or change data. It’s an abstraction layer that provides flexibility to consumers while hiding backend implementation details.

Apollo Sandbox

What’s Apollo Sandbox

Apollo sandbox is a special mode of Apollo Studio that helps with local development. It’s an UI interface and you can interactively run graphql query.

Why Apollo Sandbox

You don’t need Apollo account to run sandbox, so you don’t need to sign up anything.
Sandbox loads schema from your local GraphQL server via introspection, meaning you can use the tool to test during graphQL schema development.
You can also embed Sandbox on you own site.

Setup Sample Code

Run Apollo server at http://localhost:4000

git clone https://github.com/apollographql/odyssey-lift-off-part1
cd final\server
npm install 
npm install apollo-server graphql
npm start

Run Sandbox

Open sandbox from “https://studio.apollographql.com/sandbox/explorer”

As you can see, the schema is loaded by calling http://localhost:4000. From sandbox UI, you can run query to get data back.

Run Embedded Sandbox

There are multiple options to run embedded sandbox, I will demo “built file on CDN” option.

Retrieve code snippet from Apollo site, and save in code file index1.html.

index1.html

<div style="width: 100%; height: 100%;" id='embedded-sandbox'></div>
<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script> 
<script>
  new window.EmbeddedSandbox({
    target: '#embedded-sandbox',
    initialEndpoint: 'http://localhost:4000',
    includeCookies: false,
  });
</script>

Open index1.html from browser.

References

Apollo Explorer | Lift-off I: Basics | Apollo Odyssey (apollographql.com)

Apollo Sandbox — Apollo GraphQL Docs