Overview
We have enough to test our GraphQL server. We could send a request to it with a curl command — GraphQL servers 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 Apollo Sandbox
- Set up CORS for Sandbox
- Examine a GraphQL server's schema
- Build our first query
Apollo Sandbox
Enter Apollo Sandbox. Sandbox is free to use and doesn't require an account. It's part of the Apollo GraphOS platform, and helps with local graph development.
Apollo GraphOS is a complete cloud platform for building, managing, and scaling your graph. GraphOS provides a set of tools and services so that product developers can focus on building better apps, faster.
With Sandbox, we can load a GraphQL server's schema and explore it using some cool GraphOS features such as a schema reference and the Explorer.
The Explorer is a powerful web IDE for creating, running, and managing GraphQL operations. 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 Apollo Sandbox 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.
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 GraphQL server, 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.
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 GraphQL server 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.
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.
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 field that returns a String type.
In the SDL tab, we can also see the schema in SDL syntax.
Remember, we went with the annotation-based approach in our code, and Hot Chocolate took care of translating that into a GraphQL schema and converting C# types to GraphQL types.
It also translated C# conventions into GraphQL conventions! For example, fields in GraphQL start with lowercase letters, but resolver 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 GraphQL SDL! 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 operation. Let's open up a new workspace tab with the + button for a fresh start.
We can write the operation manually or add fields from the Documentation panel on the left.
The Explorer's Documentation tab enables us to drill down into our schema's fields, starting at the entry points of the Query type.
Clicking on the plus (⊕) button next to a field automatically adds that field to our current operation. This is a handy way to assemble complex queries without needing to remember your schema's exact structure or GraphQL syntax.
Go ahead and add the hello field.
query Query {hello}
At the top of the Operation panel is the button to run our query. Let's click it now and see what happens:
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
Key takeaways
- Apollo Sandbox is a powerful web IDE designed for local graph development. It simplifies the process of creating, running, and managing GraphQL operations.
- When connecting to a local GraphQL server from Apollo Sandbox, CORS issues may arise due to cross-origin request policies. Make sure your GraphQL server allows requests from the Sandbox URL.
- Apollo Sandbox Explorer allows us to explore our GraphQL schema and build and run GraphQL operations easily.
- Hot Chocolate allows developers to code in a familiar C# environment and conventions. It translates those C# types and conventions into GraphQL SDL and conventions behind the scenes.
Up next
Let's up the tempo in this schema and showcase some playlists!
Share your questions and comments about this lesson
This course is currently in
You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.