5. Apollo Sandbox Explorer
5m

Overview

We have enough to test our . We could send a request to it with a curl command — accept HTTP requests after all! Let's make our lives a little easier by using a GraphQL IDE instead.

In this lesson, we will:

  • Discover the benefits of using
  • Set up CORS for Sandbox
  • Examine a 's schema
  • Build our first

Apollo Sandbox

Enter Apollo Sandbox. Sandbox helps with local development. Sandbox is free to use and doesn't require an account. It loads a 's schema using and it lets us access some cool features such as a schema reference and the Explorer.

The Explorer is a powerful web IDE for creating, running, and managing . It lets us build operations easily and quickly, look at our operation history, peek at response hints, and share operations with others.

Jump over to the browser and head to at https://studio.apollographql.com/sandbox.

Let's try connecting to our server. At the top left, paste in http://localhost:5059/graphql and hit Enter or click out of the box.

https://studio.apollographql.com/sandbox/explorer

Explorer connected to our local endpoint

Uh-oh! We've got a red status circle and a message saying "Unable to reach server". If we click on the "Prefer to self-diagnose" prompt, the first suggestion is to check CORS (Cross-Origin Requests). Indeed if we open up the Developer Tools in our browser, we'll see a console message:

Access to fetch at 'http://localhost:5059/graphql' from origin
'https://studio.apollographql.com' has been blocked by CORS policy.

Setting up CORS for Sandbox

To enable Sandbox to connect to our , we'll need to set up CORS.

Note: You can find more detailed information about enabling CORS in the Microsoft .NET documentation.

Open up the Program.cs file.

First, let's add a CORS policy specifically for Sandbox to allow any headers and methods to be received by the server.

Program.cs
builder
.Services
.AddCors(options =>
{
options.AddDefaultPolicy(builder =>
{
builder
.WithOrigins("https://studio.apollographql.com")
.AllowAnyHeader()
.AllowAnyMethod();
});
});

Note: This code snippet is separate from where we add the to the web app's services.

Then, below the line where we initialize the app, let's add the CORS middleware to allow cross-domain requests.

Program.cs
app.UseCors();

That's it! Let's save our changes and restart the server with dotnet run.

Exploring our schema

Hopping back over to Sandbox, we should now see a green status circle beside the endpoint and the error message disappeared!

Awesome, let's check out our schema, which is the first tab in our main navigation.

https://studio.apollographql.com/sandbox/schema

Schema page

Here we have a full view and reference into our schema! It's pretty sparse right now, but we can see our Query type with a hello that returns a String type.

In the tab, we can also see the schema in SDL syntax.

https://studio.apollographql.com/sandbox/schema

SDL page

Remember, we went with the annotation-based approach in our code, and Hot Chocolate took care of translating that into a and converting C# types to GraphQL types.

It also translated C# conventions into conventions! For example, in GraphQL start with lowercase letters, but functions start with uppercase letters. So even though we wrote the resolver function for the field as Hello with a capital "H" in our C# code, we see hello with a lowercase "h" in our ! With the Hot Chocolate framework, we can continue to code in our familiar C# environment and conventions without needing to remember GraphQL on top of that.

Exploring the Explorer

Let's jump back over to the Explorer page.

The Operation panel in the middle is where we create queries. The Explorer may have already filled in a default . Let's open up a new workspace tab with the + button for a fresh start.

https://studio.apollographql.com/sandbox/explorer

Sandbox hovering over new workspace

We can write the manually or add from the Documentation panel on the left.

The Explorer's Documentation tab enables us to drill down into our schema's , starting at the entry points of the Query type.

Clicking on the plus (⊕) button next to a automatically adds that field to our current . This is a handy way to assemble complex queries without needing to remember your schema's exact structure or syntax.

https://studio.apollographql.com/sandbox/explorer

Running an operation in Sandbox

Go ahead and add the hello .

query Query {
hello
}

At the top of the Operation panel is the button to run our . Let's click it now and see what happens:

https://studio.apollographql.com/sandbox/explorer

Running an operation in Sandbox

The Response panel on the right shows us the data coming back from our server. Hello world! 👋

{
"data": {
"hello": "Hello world"
}
}

We just ran our first GraphQL query! 🎉

Practice

Which of these are benefits of using the Apollo Sandbox Explorer?
How can CORS be enabled for Apollo Sandbox to connect to our GraphQL server?

Key takeaways

  • is a powerful web IDE designed for local development. It simplifies the process of creating, running, and managing .
  • When connecting to a local from , CORS issues may arise due to cross-origin request policies. Make sure your GraphQL server allows requests from the Sandbox URL.
  • Explorer allows us to explore our and build and run GraphQL easily.
  • Hot Chocolate allows developers to code in a familiar C# environment and conventions. It translates those C# types and conventions into and conventions behind the scenes.

Up next

Let's up the tempo in this schema and showcase some playlists!

Previous

Share your questions and comments about this lesson

This course is currently in

beta
. Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.