Server middleware in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add middleware that logs each GraphQL request.

GraphQL

const server = new ApolloServer({ typeDefs, resolvers, [1] });

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

Aplugins: [loggingPlugin()]

Bmiddlewares: [authMiddleware()]

Ccontext: ({ req }) => ({ user: req.user })

Dintrospection: true

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'middlewares' instead of 'plugins' option.

Adding logging inside 'context' instead of plugins.

The plugins option is used to add middleware like logging in Apollo Server.

2fill in blank

medium

Complete the code to add authentication middleware in the context function.

GraphQL

const server = new ApolloServer({ typeDefs, resolvers, context: ({ req }) => [1] });

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

A{ user: req.user }

B{ headers: req.headers }

C{ token: req.token }

D{ user: authenticate(req) }

Attempts:

3 left

💡 Hint

Common Mistakes

Returning headers instead of user info.

Accessing a non-existent 'token' property.

The context function should return an object with the authenticated user, usually by calling an authenticate function with the request.

3fill in blank

hard

Fix the error in the middleware setup to correctly handle errors.

GraphQL

const errorMiddleware = { requestDidStart() { return { [1](err) { console.error(err); } }; } };

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

AonError

BdidEncounterError

CdidEncounterErrors

DhandleError

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular 'didEncounterError' instead of plural.

Using non-existent event names like 'onError' or 'handleError'.

The correct lifecycle event for error handling in Apollo Server plugins is didEncounterErrors.

4fill in blank

hard

Fill both blanks to create middleware that measures request duration.

GraphQL

const timingPlugin = { requestDidStart() { const start = Date.now(); return { [1]() { const duration = Date.now() [2] start; console.log(`Request took ${duration}ms`); } }; } };

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

AwillSendResponse

B-

C+

DdidFinish

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of subtraction for duration.

Using wrong lifecycle event names.

The willSendResponse event runs before sending the response. Subtracting start from current time gives the duration.

5fill in blank

hard

Fill all three blanks to add middleware that modifies the response headers.

GraphQL

const headerPlugin = { requestDidStart() { return { [1](requestContext) { requestContext.response.http.headers.set([2], [3]); } }; } };

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

AwillSendResponse

B'X-Custom-Header'

C'Processed'

DdidResolveOperation

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event names like 'didResolveOperation'.

Not using string quotes for header name and value.

The willSendResponse event is used to modify headers before sending. The header name and value are set as strings.

Practice

1. What is the main purpose of server middleware in a GraphQL server?

easy

A. To run code before GraphQL resolvers to manage requests

B. To define the GraphQL schema types

C. To execute database queries directly

D. To format the GraphQL query results

Solution

1. Step 1: Understand middleware role

   Middleware runs before the main GraphQL code to handle requests.

2. Step 2: Identify middleware tasks

   It can check, log, or modify requests before resolvers run.

3. Final Answer:

   To run code before GraphQL resolvers to manage requests -> Option A

4. Quick Check:

   Middleware manages requests before resolvers [OK]

Hint: Middleware runs before resolvers to manage requests [OK]

Common Mistakes:

• Confusing middleware with schema definition
• Thinking middleware executes database queries
• Assuming middleware formats results

2. Which of the following is the correct way to call the next middleware function in a GraphQL server middleware?

easy

A. next();

B. continue();

C. proceed();

D. runNext();

Solution

1. Step 1: Recall middleware function signature

   Middleware functions receive a next callback to continue processing.

2. Step 2: Identify correct call syntax

   The standard call to continue is next(); exactly.

3. Final Answer:

   next(); -> Option A

4. Quick Check:

   Use next() to continue middleware chain [OK]

Hint: Call next() to continue middleware processing [OK]

Common Mistakes:

• Using incorrect function names like continue()
• Forgetting to call next() causing request hang
• Calling next without parentheses

3. Given this middleware code snippet, what will be logged when a request is made?

function logMiddleware(req, res, next) {
  console.log('Request received');
  next();
  console.log('Request processed');
}

medium

A. Request processed\nRequest received

B. Request received\nRequest processed

C. Only Request received

D. Only Request processed

Solution

1. Step 1: Analyze middleware execution order

   First, 'Request received' logs before calling next().

2. Step 2: Understand next() behavior

   After next() completes, 'Request processed' logs.

3. Final Answer:

   Request received\nRequest processed -> Option B

4. Quick Check:

   Logs before and after next() run in order [OK]

Hint: Logs before and after next() run in order [OK]

Common Mistakes:

• Assuming next() blocks logging after it
• Thinking logs reverse order
• Ignoring that next() allows later code to run

4. Identify the error in this middleware code:

function authMiddleware(req, res, next) {
  if (!req.user) {
    res.status(401).send('Unauthorized');
  }
  next();
}

medium

A. req.user check should be after next()

B. Missing call to next() inside if block

C. res.status should be res.sendStatus

D. next() is called even after sending response

Solution

1. Step 1: Check flow after sending response

   If !req.user, response is sent but next() still runs.

2. Step 2: Understand middleware flow control

   Calling next() after sending response can cause errors or duplicate handling.

3. Final Answer:

   next() is called even after sending response -> Option D

4. Quick Check:

   Stop calling next() after response sent [OK]

Hint: Don't call next() after sending response [OK]

Common Mistakes:

• Calling next() unconditionally after response
• Not returning after sending response
• Misplacing user check after next()

5. You want to add middleware that logs the request time and then modifies the request object to add a requestId before GraphQL resolvers run. Which middleware code correctly achieves this?

hard

A. function middleware(req, res, next) {
req.requestTime = Date.now();
next();
res.requestId = Math.random().toString(36).slice(2);
}

B. function middleware(req, res) {
req.requestTime = Date.now();
next();
req.requestId = Math.random().toString(36).slice(2);
}

C. function middleware(req, res, next) {
req.requestTime = Date.now();
req.requestId = Math.random().toString(36).slice(2);
next();
}

D. function middleware(req, res, next) {
next();
req.requestTime = Date.now();
req.requestId = Math.random().toString(36).slice(2);
}

Solution

1. Step 1: Ensure middleware modifies request before next()

   Properties must be set on req before calling next() to be available in resolvers.

2. Step 2: Check correct use of next() and property assignment

   function middleware(req, res, next) { req.requestTime = Date.now(); req.requestId = Math.random().toString(36).slice(2); next(); } sets both properties before next(), ensuring proper order and correct object.

3. Final Answer:

   function middleware(req, res, next) { req.requestTime = Date.now(); req.requestId = Math.random().toString(36).slice(2); next(); } -> Option C

4. Quick Check:

   Set req properties before next() call [OK]

Hint: Set req properties before next() to pass data [OK]

Common Mistakes:

• Calling next() before setting properties
• Modifying res instead of req for request data
• Missing next() parameter or call