GraphQL with Express

npm install @apollo/server @as-integrations/express5 graphql express cors

// graphql-server.mjs
import { createServer } from 'node:http';
import cors from 'cors';
import express from 'express';
import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@as-integrations/express5';
import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer';

const books = [
  { id: '1', title: 'The Pragmatic Programmer', author: 'Placeholder Author' },
  { id: '2', title: 'Designing Data-Intensive Applications', author: 'Another Author' },
];

const typeDefs = /* GraphQL */ `
  type Book {
    id: ID!
    title: String!
    author: String!
  }

  type Query {
    books: [Book!]!
    book(id: ID!): Book
  }
`;

const resolvers = {
  Query: {
    books: () => books,
    book: (_parent, { id }) => books.find((book) => book.id === id) ?? null,
  },
};

const app = express();
const httpServer = createServer(app);

const apollo = new ApolloServer({
  typeDefs,
  resolvers,
  // Lets in-flight requests finish when the HTTP server is closed.
  plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
});
await apollo.start();

app.use(
  '/graphql',
  cors({ origin: ['http://localhost:5173'] }),
  express.json({ limit: '100kb' }),
  expressMiddleware(apollo),
);

app.get('/health', (req, res) => {
  res.json({ status: 'ok' });
});

httpServer.listen(4000, () => {
  console.log('GraphQL endpoint on http://localhost:4000/graphql');
});

// graphql-context.mjs
import { createServer } from 'node:http';
import { randomUUID } from 'node:crypto';
import cors from 'cors';
import DataLoader from 'dataloader';
import express from 'express';
import { GraphQLError } from 'graphql';
import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@as-integrations/express5';
import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer';

// Placeholder: in a real application this verifies a signed token (for example
// with the jose package) and returns the claims, or null when it is invalid.
async function verifyAccessToken(token) {
  return token === 'placeholder-valid-token' ? { sub: 'user-1', role: 'reader' } : null;
}

// Placeholder repository standing in for the database layer of the Bookshelf API.
const reviewRepository = {
  async findByBookIds(ids) {
    return ids.map((id) => ({ bookId: id, rating: 5, text: 'Placeholder review' }));
  },
};

const typeDefs = /* GraphQL */ `
  type Review {
    bookId: ID!
    rating: Int!
    text: String!
  }

  type Query {
    me: String
    reviewsFor(bookId: ID!): [Review!]!
  }
`;

const resolvers = {
  Query: {
    me: (_parent, _args, context) => {
      if (!context.user) {
        throw new GraphQLError('You must be signed in', {
          extensions: { code: 'UNAUTHENTICATED', http: { status: 401 } },
        });
      }
      return context.user.sub;
    },
    reviewsFor: async (_parent, { bookId }, context) => {
      // Batched with every other call made during the same operation.
      const review = await context.loaders.reviewsByBook.load(bookId);
      return review ? [review] : [];
    },
  },
};

async function buildContext({ req }) {
  const header = req.get('authorization') ?? '';
  const [scheme, token] = header.split(' ');
  const user = scheme === 'Bearer' && token ? await verifyAccessToken(token) : null;

  return {
    user,
    requestId: req.get('x-request-id') ?? randomUUID(),
    loaders: {
      reviewsByBook: new DataLoader(async (ids) => {
        const rows = await reviewRepository.findByBookIds(ids);
        return ids.map((id) => rows.find((row) => row.bookId === id));
      }),
    },
  };
}

const app = express();
const httpServer = createServer(app);
const apollo = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
});
await apollo.start();

app.use(
  '/graphql',
  cors({ origin: ['http://localhost:5173'] }),
  express.json({ limit: '100kb' }),
  expressMiddleware(apollo, { context: buildContext }),
);

httpServer.listen(4000);

// graphql-errors.mjs
import express from 'express';

const app = express();

// ... app.use('/graphql', cors(), express.json(), expressMiddleware(apollo)); ...

// Registered after the GraphQL route: errors raised by express.json() end up here.
app.use('/graphql', (err, req, res, next) => {
  if (res.headersSent) {
    return next(err);
  }
  const status = err.status ?? err.statusCode ?? 500;
  res
    .status(status)
    .type('application/json')
    .json({
      errors: [
        {
          message: status >= 500 ? 'Internal server error' : err.message,
          extensions: { code: status === 413 ? 'PAYLOAD_TOO_LARGE' : 'BAD_REQUEST' },
        },
      ],
    });
});

// graphql-http-server.mjs
import cors from 'cors';
import express from 'express';
import { buildSchema } from 'graphql';
import { createHandler } from 'graphql-http/lib/use/express';

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

const rootValue = {
  hello: () => 'Hello from the Bookshelf API',
};

const app = express();

app.all(
  '/graphql',
  cors({ origin: ['http://localhost:5173'] }),
  createHandler({
    schema,
    rootValue,
    // The first argument is graphql-http's own request wrapper ({ url, method, headers, body, raw, context }),
    // not the Express request: the Express request is req.raw.
    context: (req) => ({ requestId: req.raw.get('x-request-id') ?? null }),
  }),
);

app.listen(4000, (error) => {
  if (error) {
    throw error;
  }
});

curl -s http://localhost:4000/graphql \
  -H 'content-type: application/json' \
  -H 'authorization: Bearer placeholder-valid-token' \
  -d '{"query":"{ me }"}'