Apollo Server Context Undefined Fix

Leave a Comment / GraphQL

Apollo Server Context Undefined Fix

apollo server context undefined

If you are building a GraphQL API using Node.js, Express, and Apollo Server, you may suddenly face an issue where context becomes undefined.

This is one of the most common problems developers face while implementing authentication, JWT verification, database models, or request headers inside GraphQL resolvers.

The good news is that the issue is usually caused by a small configuration mistake.

In this complete beginner-friendly guide, you will learn:

  • Why Apollo Server context becomes undefined
  • How Apollo Server context works
  • How to correctly configure context
  • Common mistakes developers make
  • JWT authentication example
  • Best practices for production applications
  • Debugging tips

This guide focuses on the Apollo Server context undefined fix using:

  • Node.js
  • Express.js
  • Apollo Server
  • GraphQL

What is Apollo Server Context?

Apollo Server context is a shared object available inside every GraphQL resolver.

It is mainly used for:

  • Authentication
  • Current user data
  • Database models
  • Request headers
  • Request-specific information

Example:

context: async ({ req }) => {
  return {
    user: req.user,
  };
}Code language: JavaScript (javascript)

Then inside resolver:

Query: {
  me: (_, __, context) => {
    return context.user;
  },
}Code language: CSS (css)

If the context is not configured correctly, you may get errors like:

Cannot read properties of undefinedCode language: JavaScript (javascript)

or

context is undefinedCode language: JavaScript (javascript)

Why Apollo Server Context Becomes Undefined

The Apollo Server context undefined issue usually happens because of:

  1. Missing context function
  2. Wrong middleware configuration
  3. Incorrect Express integration
  4. Using Apollo Server v4 incorrectly
  5. Forgetting to return context object
  6. Wrong parameter destructuring
  7. Authentication middleware issues

Let us fix them step by step.

Apollo Server Context Undefined Fix Using Express

Step 1: Install Required Packages

Install dependencies:

npm install express graphql @apollo/server
npm install cors body-parser
npm install @as-integrations/express5Code language: JavaScript (javascript)

Step 2: Create Basic Apollo Server

Create server.js

import express from "express";
import cors from "cors";
import bodyParser from "body-parser";

import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@as-integrations/express5";

const typeDefs = `#graphql
  type Query {
    message: String
  }
`;

const resolvers = {
  Query: {
    message: (_, __, context) => {
      console.log(context);

      return "Apollo Server Running";
    },
  },
};

const app = express();

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

await server.start();

app.use(
  "/graphql",
  cors(),
  bodyParser.json(),
  expressMiddleware(server, {
    context: async ({ req }) => {
      return {
        token: req.headers.authorization || "",
      };
    },
  })
);

app.listen(4000, () => {
  console.log("Server running on port 4000");
});Code language: JavaScript (javascript)

This is the correct Apollo Server context configuration.

Step 3: Test GraphQL Query

Open:

http://localhost:4000/graphqlCode language: JavaScript (javascript)

Run query:

query {
  message
}

You should see:

{
  "data": {
    "message": "Apollo Server Running"
  }
}Code language: JSON / JSON with Comments (json)

Common Reason 1: Forgetting Context Function

Wrong:

expressMiddleware(server)

Correct:

expressMiddleware(server, {
  context: async ({ req }) => ({
    token: req.headers.authorization,
  }),
})Code language: JavaScript (javascript)

Without the context function, resolvers may receive undefined values.

Common Reason 2: Wrong Resolver Parameters

Many beginners write:

message: (context) => {
  console.log(context);
}Code language: JavaScript (javascript)

This is wrong.

Resolver parameters are:

(parent, args, context, info)Code language: PHP (php)

Correct:

message: (_, __, context) => {
  console.log(context);
}Code language: JavaScript (javascript)

Common Reason 3: Not Returning Object

Wrong:

context: async ({ req }) => {
  token: req.headers.authorization;
}Code language: JavaScript (javascript)

This returns undefined.

Correct:

context: async ({ req }) => {
  return {
    token: req.headers.authorization,
  };
}Code language: JavaScript (javascript)

or

context: async ({ req }) => ({
  token: req.headers.authorization,
})Code language: JavaScript (javascript)

Apollo Server Context Undefined Fix with JWT Authentication

Authentication is the most common place where context is used.

Install JWT package:

npm install jsonwebtoken

JWT Authentication Example

Create Context

import jwt from "jsonwebtoken";

context: async ({ req }) => {
  const authHeader = req.headers.authorization || "";

  const token = authHeader.replace("Bearer ", "");

  let user = null;

  if (token) {
    try {
      user = jwt.verify(token, "SECRET_KEY");
    } catch (error) {
      console.log("Invalid token");
    }
  }

  return {
    user,
  };
}Code language: JavaScript (javascript)

Use User Inside Resolver

const resolvers = {
  Query: {
    profile: (_, __, context) => {
      if (!context.user) {
        throw new Error("Unauthorized");
      }

      return "Protected Profile Data";
    },
  },
};Code language: JavaScript (javascript)

Common Reason 4: Using Apollo Server v4 Incorrectly

Apollo Server v4 changed Express integration.

Old version:

server.applyMiddleware({ app });

New version:

app.use(
  "/graphql",
  expressMiddleware(server)
);Code language: PHP (php)

If you follow old tutorials with Apollo Server v4, the context may become undefined.

Always use:

@as-integrations/express5Code language: JavaScript (javascript)

for modern Express integration.

Official Apollo documentation:

Apollo Server Documentation

Common Reason 5: Middleware Order Problems

Wrong middleware order can also break context.

Wrong:

app.use(expressMiddleware(server));

app.use(bodyParser.json());Code language: PHP (php)

Correct:

app.use(
  bodyParser.json(),
  expressMiddleware(server)
);Code language: CSS (css)

Always parse request body before GraphQL middleware.

Apollo Server Context with Database Models

You can also pass database models through context.

Example with MongoDB:

context: async () => {
  return {
    UserModel,
    ProductModel,
  };
}Code language: JavaScript (javascript)

Resolver:

users: async (_, __, context) => {
  return context.UserModel.find();
}Code language: JavaScript (javascript)

This pattern is widely used in production GraphQL applications.

Best Practices for Apollo Server Context

Keep Context Lightweight

Do not place huge objects inside context.

Good:

{
  user,
  models,
}

Bad:

{
  hugeDatabaseDump,
}

Avoid Business Logic in Context

Context should only prepare shared data.

Do not write complex logic there.

Use Async Context

Always use async context:

context: async ({ req }) => {
  return {};
}Code language: JavaScript (javascript)

This helps future scalability.

Handle Authentication Errors Gracefully

Wrong:

jwt.verify(token, SECRET);Code language: CSS (css)

Correct:

try {
  jwt.verify(token, SECRET);
} catch (error) {
  console.log(error);
}Code language: JavaScript (javascript)

Common Mistakes Developers Make

Using Wrong Header Name

Wrong:

req.headers.AuthorizationCode language: CSS (css)

Correct:

req.headers.authorizationCode language: CSS (css)

Headers are lowercase in Node.js.

Forgetting Bearer Token Removal

Wrong:

jwt.verify(authHeader, SECRET);Code language: CSS (css)

Correct:

const token = authHeader.replace("Bearer ", "");Code language: JavaScript (javascript)

Not Passing Cookies

If using cookies:

credentials: "include"Code language: JavaScript (javascript)

must be enabled on frontend requests.

Debugging Apollo Server Context Undefined

Log Context

Inside resolver:

console.log(context);Code language: JavaScript (javascript)

Log Headers

Inside context:

context: async ({ req }) => {
  console.log(req.headers);

  return {};
}Code language: JavaScript (javascript)

Test with Postman

Send:

Authorization: Bearer TOKENCode language: HTTP (http)

inside request headers.

Folder Structure Example

project/
│
├── server.js
├── schema/
│   └── typeDefs.js
├── resolvers/
│   └── resolvers.js
├── middleware/
│   └── auth.js
├── models/
│   └── User.js
└── package.json

A clean folder structure helps avoid configuration mistakes.

Conclusion

The Apollo Server context undefined fix is usually simple once you understand how Apollo Server middleware works.

Most issues happen because of:

  • Missing context function
  • Wrong resolver parameters
  • Incorrect Express integration
  • Middleware order issues
  • Apollo Server version mismatch

The best approach is:

  1. Configure context correctly
  2. Return proper objects
  3. Use async functions
  4. Test request headers carefully
  5. Log values during debugging

Once your context works correctly, implementing authentication, database access, and request handling becomes much easier.

If you are building production GraphQL applications using Node.js and Express, mastering Apollo Server context is extremely important.

A properly configured context system makes your application:

  • Cleaner
  • More secure
  • Easier to scale
  • Easier to debug

That is why understanding the Apollo Server context undefined fix is a must for every GraphQL developer.

Related Articles

Leave a Comment

Your email address will not be published. Required fields are marked *