Express integration in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this Express GraphQL server response?

Consider this Express server setup using GraphQL:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

const root = {
  hello: () => 'Hello world!'
};

const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: false
}));

app.listen(4000);

If a client sends the query { hello } to /graphql, what is the JSON response?

A {"message":"Hello world!"}

B {"error":"Field 'hello' not found"}

C {"data":{"hello":null}}

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

💡 Hint

Remember that GraphQL responses wrap data inside a data field.

The GraphQL server returns the data requested inside a data object. Since the resolver for hello returns 'Hello world!', the response is {"data":{"hello":"Hello world!"}}.

📝 Syntax

intermediate

Which option correctly sets up GraphQL middleware in Express?

Which of the following code snippets correctly integrates GraphQL middleware into an Express app?

A app.get('/graphql', graphqlHTTP({ schema, rootValue, graphiql: true }));

B app.post('/graphql', graphqlHTTP({ schema: schema, root: rootValue }));

C app.use('/graphql', graphqlHTTP({ schema, rootValue, graphiql: true }));

D app.use('/graphql', graphqlHTTP(schema, rootValue, graphiql: true));

💡 Hint

GraphQL middleware is usually added with app.use and takes an options object.

Option C correctly uses app.use with an options object containing schema, rootValue, and graphiql. Option C uses app.get which is not standard for GraphQL middleware. Option C passes arguments incorrectly. Option C uses root instead of rootValue and only listens to POST requests.

❓ optimization

advanced

How to optimize GraphQL schema building in Express for performance?

You notice your Express server rebuilds the GraphQL schema on every request, causing slow responses. Which approach optimizes this?

A Build the schema once outside the request handler and reuse it for all requests.

B Build the schema inside the middleware function on every request.

C Use a new schema instance for each query to avoid caching issues.

D Disable schema caching to ensure fresh data every time.

💡 Hint

Think about expensive operations and how often they should run.

Building the schema is expensive. Doing it once and reusing it improves performance. Building it on every request (option A) slows down the server. Options C and D cause unnecessary overhead.

🔧 Debug

advanced

Why does this Express GraphQL server return a 404 error?

Given this Express setup:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    greet: String
  }
`);

const root = {
  greet: () => 'Hi!'
};

const app = express();

app.get('/graphql', graphqlHTTP({ schema, rootValue: root, graphiql: true }));

app.listen(3000);

When a client sends a POST request to /graphql, the server responds with 404 Not Found. Why?

A The middleware is only attached to GET requests, so POST requests are not handled.

B The schema is invalid causing the server to reject POST requests.

C The root resolver is missing a POST handler.

D The server is not listening on port 3000.

💡 Hint

Check which HTTP methods the middleware is attached to.

The middleware is attached only to GET requests via app.get. POST requests to /graphql are not handled, resulting in 404 errors. Using app.use would handle all HTTP methods.

🧠 Conceptual

expert

What is the role of the rootValue in Express GraphQL integration?

In Express GraphQL middleware, what does the rootValue option represent?

A It defines the GraphQL schema structure and types.

B It provides resolver functions for the fields in the GraphQL schema.

C It configures the HTTP server settings for Express.

D It enables the GraphiQL interface for testing queries.

💡 Hint

Think about what resolves the data for queries.

The rootValue is an object that contains resolver functions. These functions provide the data for the fields defined in the GraphQL schema when queries are executed.

Practice

1. What is the main purpose of using express-graphql middleware in an Express app?

easy

A. To create a new database connection

B. To connect a GraphQL schema to the Express server for handling HTTP requests

C. To serve static files like images and CSS

D. To replace Express with a GraphQL server

Solution

1. Step 1: Understand the role of middleware in Express

   Middleware functions in Express handle requests and responses, adding features to the server.

2. Step 2: Identify what express-graphql does

   This middleware connects a GraphQL schema and resolvers to Express, enabling GraphQL queries over HTTP.

3. Final Answer:

   To connect a GraphQL schema to the Express server for handling HTTP requests -> Option B

4. Quick Check:

   express-graphql middleware = Connect GraphQL to Express [OK]

Hint: Middleware connects GraphQL schema to Express HTTP server [OK]

Common Mistakes:

• Thinking it creates a database connection
• Confusing it with static file serving
• Assuming it replaces Express entirely

2. Which of the following is the correct way to use express-graphql middleware in an Express app?

easy

A. app.get('/graphql', graphqlHTTP(mySchema));

B. app.use('/graphql', graphqlHTTP(schema, rootResolver));

C. app.post('/graphql', graphqlHTTP({ rootValue: rootResolver }));

D. app.use('/graphql', graphqlHTTP({ schema: mySchema, rootValue: rootResolver, graphiql: true }));

Solution

1. Step 1: Recall the correct syntax for express-graphql middleware

   The middleware is used with app.use and takes an options object with keys like schema, rootValue, and graphiql.

2. Step 2: Check each option for correct usage

   app.use('/graphql', graphqlHTTP({ schema: mySchema, rootValue: rootResolver, graphiql: true })); correctly uses app.use with an options object including schema, rootValue, and graphiql. Others either misuse method or pass wrong arguments.

3. Final Answer:

   app.use('/graphql', graphqlHTTP({ schema: mySchema, rootValue: rootResolver, graphiql: true })); -> Option D

4. Quick Check:

   express-graphql needs options object with schema and rootValue [OK]

Hint: Use app.use with options object for express-graphql [OK]

Common Mistakes:

• Using app.get or app.post instead of app.use
• Passing schema and rootValue as separate arguments
• Omitting the graphiql option during development

3. Given this Express setup with GraphQL:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

const root = {
  hello: () => 'Hello world!'
};

const app = express();
app.use('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: false }));

app.listen(4000);

What will be the JSON response to this POST query to /graphql?

{"query": "{ hello }"}

medium

A. {"data":{"hello":"Hello world!"}}

B. {"error":"Query not found"}

C. {"data":{"hello":null}}

D. SyntaxError

Solution

1. Step 1: Understand the schema and resolver

   The schema defines a Query type with a field hello returning a String. The root resolver returns 'Hello world!' for hello.

2. Step 2: Analyze the query and response

   The query requests { hello }. The resolver returns 'Hello world!', so the response JSON includes this under data.

3. Final Answer:

   {"data":{"hello":"Hello world!"}} -> Option A

4. Quick Check:

   Query hello returns 'Hello world!' [OK]

Hint: Query matches resolver return value exactly [OK]

Common Mistakes:

• Expecting an error when schema and resolver match
• Confusing null with missing data
• Assuming graphiql affects response format

4. You wrote this Express GraphQL setup:

app.use('/graphql', graphqlHTTP({
  schema: mySchema,
  rootValue: rootResolver
}));

But when you send queries, you get an error: Cannot POST /graphql. What is the likely cause?

medium

A. You did not enable the body parser middleware for JSON

B. You did not define the schema correctly

C. You used app.get instead of app.use

D. You forgot to import express-graphql

Solution

1. Step 1: Understand the error message

   The error 'Cannot POST /graphql' means Express does not recognize POST requests to that route.

2. Step 2: Check middleware setup for POST data

   GraphQL POST requests send JSON body. Express needs body parser middleware (like express.json()) to parse JSON bodies before graphqlHTTP.

3. Final Answer:

   You did not enable the body parser middleware for JSON -> Option A

4. Quick Check:

   Missing JSON body parser causes POST errors [OK]

Hint: Always add express.json() before graphqlHTTP for POST [OK]

Common Mistakes:

• Assuming graphqlHTTP handles JSON parsing automatically
• Confusing app.use with app.get
• Blaming schema definition for routing errors

5. You want to add a new Query field user(id: ID!): User to your GraphQL schema in Express. The User type has fields id and name. Which of the following shows the correct way to extend the schema and resolver for this, assuming you have a getUserById function?

hard

A. Schema: type Query { user(id: String): User } and resolver: { user: (id) => getUserById(id) }

B. Schema: type Query { user: User } and resolver: { user: () => getUserById() }

C. Schema: type Query { user(id: ID!): User } and resolver: { user: ({id}) => getUserById(id) }

D. Schema: type Query { user(id: ID!): User } and resolver: { user: (args) => getUserById(args) }

Solution

1. Step 1: Define schema with required argument and User type

   The schema must declare user(id: ID!): User to require an ID argument and return a User object.

2. Step 2: Write resolver matching argument destructuring

   The resolver function receives an object with arguments, so destructure {id} and pass it to getUserById.

3. Final Answer:

   Schema: type Query { user(id: ID!): User } and resolver: { user: ({id}) => getUserById(id) } -> Option C

4. Quick Check:

   Schema arg ID! and resolver destructure args [OK]

Hint: Destructure args object in resolver for required ID [OK]

Common Mistakes:

• Not marking ID as non-null with !
• Passing args incorrectly in resolver
• Using wrong argument type in schema