GraphQL Playground and tools - Mini Project: Build & Apply

Explore GraphQL Playground and Tools

📖 Scenario: You are working with a GraphQL API for a simple book store. You want to explore the API using GraphQL Playground and understand how to use its tools to write queries and see results.

🎯 Goal: Learn to set up and use GraphQL Playground to write queries, use variables, and explore schema documentation.

📋 What You'll Learn

Open GraphQL Playground connected to the book store API endpoint

Write a query to fetch book titles and authors

Add variables to the query to filter books by genre

Use the documentation explorer to find available queries and types

💡 Why This Matters

🌍 Real World

GraphQL Playground is a tool developers use to explore and test GraphQL APIs quickly without writing code in an app.

💼 Career

Knowing how to use GraphQL Playground helps developers understand API capabilities and speeds up backend and frontend development.

1

Set up GraphQL Playground with API endpoint

Open GraphQL Playground and set the API endpoint URL to https://example.com/graphql in the URL bar.

GraphQL

# Set the API endpoint URL to https://example.com/graphql
# Your code here

Need a hint?

Look for the URL input at the top of GraphQL Playground and enter the exact URL https://example.com/graphql.

2

Write a query to fetch book titles and authors

In the query editor, write a GraphQL query named GetBooks that fetches the title and author fields from books.

GraphQL

# Write a query named GetBooks to fetch title and author from books
# Your code here

Need a hint?

Use the query keyword followed by the query name GetBooks. Inside, request books with title and author fields.

3

Add variables to filter books by genre

Modify the GetBooks query to accept a variable $genre of type String. Use this variable to filter books by genre with an argument genre: $genre.

GraphQL

# Modify GetBooks query to accept $genre variable and filter books by genre
# Your code here

Need a hint?

Declare the variable $genre in parentheses after the query name with type String. Pass it as an argument to books.

4

Use documentation explorer to find available queries

Open the documentation explorer panel in GraphQL Playground. Find and list the names of at least two queries available in the schema.

GraphQL

# Open documentation explorer and find two query names
# Your code here

Need a hint?

Click the Docs tab on the right side in GraphQL Playground. Look under the Query type to see available queries like books and bookById.