GraphQL Playground and tools - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start the GraphQL Playground server on port 4000.

GraphQL

const server = new ApolloServer({ typeDefs, resolvers });
server.listen({ port: [1] }).then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

Drag options to blanks, or click blank then click option'

A3000

B4000

C5000

D8080

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a port number that is not commonly used for GraphQL Playground.

Using a port number that might be blocked or in use.

The default port for GraphQL Playground examples is usually 4000. This code sets the server to listen on port 4000.

2fill in blank

medium

Complete the code to import the GraphQL Playground middleware for Express.

GraphQL

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const [1] = require('graphql-playground-middleware-express').default;

Drag options to blanks, or click blank then click option'

Aplayground

BgraphqlPlayground

CgraphqlPlaygroundMiddleware

DplaygroundMiddleware

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect import names that do not match the package export.

Forgetting to add '.default' when importing the middleware.

The package exports the middleware as the default export, commonly imported as playgroundMiddleware or similar. Here, playgroundMiddleware is the correct import name.

3fill in blank

hard

Fix the error in the GraphQL Playground setup by completing the missing path in the Express route.

GraphQL

app.get([1], playgroundMiddleware({ endpoint: '/graphql' }));

Drag options to blanks, or click blank then click option'

A'/playground'

B'/graphql'

C'/api'

D'/'

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same path as the GraphQL API endpoint for the playground.

Using a root path '/' which might conflict with other routes.

The GraphQL Playground middleware is usually mounted on a separate path like '/playground' to serve the interactive UI, while the GraphQL API runs on '/graphql'.

4fill in blank

hard

Fill both blanks to configure Apollo Server to enable GraphQL Playground in production.

GraphQL

const server = new ApolloServer({
  typeDefs,
  resolvers,
  [1]: true,
  [2]: 'playground'
});

Drag options to blanks, or click blank then click option'

Aplayground

Bintrospection

Cdebug

Dtracing

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'debug' or 'tracing' with playground settings.

Not enabling introspection which is required for playground.

To enable GraphQL Playground in production, introspection must be set to true, and playground must be enabled.

5fill in blank

hard

Fill all three blanks to create a GraphQL Playground query that fetches a user's name and email by ID.

GraphQL

query GetUser {
  user(id: [1]) {
    [2]
    [3]
  }
}

Drag options to blanks, or click blank then click option'

A"123"

Bname

Cemail

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using an unquoted ID value.

Requesting fields not defined in the schema.

Including 'id' as a requested field when it's already used as argument.

The query requests a user with ID "123" and asks for the name and email fields.

Practice

1. What is the main purpose of GraphQL Playground?

easy

A. To write and test GraphQL queries easily without extra setup

B. To store large amounts of data permanently

C. To replace SQL databases with a new storage system

D. To create user interfaces for mobile apps

Solution

1. Step 1: Understand GraphQL Playground's role

   GraphQL Playground is a tool designed to help users write and test GraphQL queries interactively.

2. Step 2: Compare options with this role

   Only To write and test GraphQL queries easily without extra setup describes this purpose correctly; others describe unrelated functions.

3. Final Answer:

   To write and test GraphQL queries easily without extra setup -> Option A

4. Quick Check:

   GraphQL Playground = Query testing tool [OK]

Hint: Think: Playground means a place to try things out [OK]

Common Mistakes:

• Confusing Playground with database storage
• Thinking it builds app interfaces
• Assuming it replaces databases

2. Which of the following is the correct way to start a query in GraphQL Playground?

easy

A. SELECT * FROM user

B. query { user { id name } }

C. { user id name }

D. GET user { id, name }

Solution

1. Step 1: Recall GraphQL query syntax

   GraphQL queries start with the keyword query followed by the selection set in braces.

2. Step 2: Check each option's syntax

   query { user { id name } } uses correct GraphQL syntax. Options B and D use SQL or HTTP-like syntax, and C misses the query keyword and braces.

3. Final Answer:

   query { user { id name } } -> Option B

4. Quick Check:

   GraphQL queries start with 'query' [OK]

Hint: GraphQL queries start with 'query' keyword and braces [OK]

Common Mistakes:

• Using SQL syntax instead of GraphQL
• Omitting the 'query' keyword
• Missing braces around fields

3. Given this GraphQL query in Playground:

query { book(id: "1") { title author } }

What will the result look like if the book with id "1" has title "GraphQL Guide" and author "Anna"?

medium

A. { "book": { "title": "GraphQL Guide", "author": "Anna" } }

B. { "data": { "book": ["GraphQL Guide", "Anna"] } }

C. { "data": { "book": { "title": "GraphQL Guide", "author": "Anna" } } }

D. { "data": { "book": { "name": "GraphQL Guide", "writer": "Anna" } } }

Solution

1. Step 1: Understand GraphQL response format

   GraphQL responses wrap requested data inside a top-level "data" object matching the query structure.

2. Step 2: Match query fields with response

   The query asks for title and author fields of book. { "data": { "book": { "title": "GraphQL Guide", "author": "Anna" } } } matches this exactly with correct field names and structure.

3. Final Answer:

   { "data": { "book": { "title": "GraphQL Guide", "author": "Anna" } } } -> Option C

4. Quick Check:

   GraphQL response = data wrapper + requested fields [OK]

Hint: GraphQL results always wrap data inside a 'data' object [OK]

Common Mistakes:

• Omitting the 'data' wrapper in response
• Using wrong field names in response
• Returning arrays instead of objects

4. You wrote this query in GraphQL Playground:

query { user(id: 5) { name email } }

But you get an error. What is the likely cause?

medium

A. GraphQL Playground does not support arguments

B. The query keyword is missing

C. Field names must be uppercase

D. The id argument should be a string, so it needs quotes

Solution

1. Step 1: Check argument types in GraphQL

   GraphQL requires string arguments to be in quotes. Here, id is likely a string but given without quotes.

2. Step 2: Verify other options

   The query keyword is present, field names are case-sensitive but lowercase is valid, and Playground supports arguments. So only The id argument should be a string, so it needs quotes explains the error.

3. Final Answer:

   The id argument should be a string, so it needs quotes -> Option D

4. Quick Check:

   String args need quotes in GraphQL [OK]

Hint: Put quotes around string arguments in queries [OK]

Common Mistakes:

• Leaving string arguments unquoted
• Assuming Playground lacks argument support
• Changing field name case incorrectly

5. You want to explore a new GraphQL API using Playground. Which feature helps you see all available types and fields without writing a query?

hard

A. The Schema Explorer sidebar showing types and fields

B. The Query History panel listing past queries

C. The Response Formatter that beautifies output

D. The Variable Editor for setting query variables

Solution

1. Step 1: Identify features for schema exploration

   GraphQL Playground includes a Schema Explorer sidebar that lists all types, queries, mutations, and fields available in the API.

2. Step 2: Compare other options

   Query History shows past queries, Response Formatter beautifies output, Variable Editor manages variables. Only Schema Explorer shows API schema details.

3. Final Answer:

   The Schema Explorer sidebar showing types and fields -> Option A

4. Quick Check:

   Schema Explorer = view API types and fields [OK]

Hint: Use Schema Explorer to browse API structure easily [OK]

Common Mistakes:

• Confusing Query History with schema browsing
• Thinking Response Formatter shows schema
• Assuming Variable Editor lists fields