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.