Learn GraphQL - Building a GraphQL Server with Apollo Server

#Introduction

All the concepts you've learned — schema, queries, mutations, resolvers, context — will now come together into a server that actually runs. Episode 7 builds the first GraphQL server with Apollo Server 4, the most popular GraphQL framework in the JavaScript ecosystem.

We'll install dependencies, build the schema from type definitions and a resolver map, run the server standalone and with Express, use Apollo Sandbox to test queries, and set up a development workflow with hot reload and TypeScript.

#Apollo Server Fundamentals

#Why Apollo Server

Apollo Server was chosen because it's mature, well documented, and integrates with a complete Apollo ecosystem: Apollo Client, Apollo Studio, and automation tooling. Version 4 is the latest stable release with a more modular architecture: all libraries are split by integration, and it has a built-in sandbox for development.

Install the core dependencies:

npm install @apollo/server graphql

The graphql library is the reference implementation of the GraphQL specification, while @apollo/server wraps it into a ready-to-use HTTP server.

#Basic Server Structure

Apollo Server is built from two things: typeDefs (the schema in SDL) and resolvers (an object containing resolver functions):

Minimal Apollo Server 4 server

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";
 
const typeDefs = `
  type Query {
    hello: String
  }
`;
 
const resolvers = {
  Query: {
    hello: () => "Halo dunia GraphQL",
  },
};
 
const server = new ApolloServer({ typeDefs, resolvers });
 
const { url } = await startStandaloneServer(server, { listen: { port: 4000 } });
console.log("Server siap di", url);

Run it with npx tsx src/index.ts and open http://localhost:4000 to enter Apollo Sandbox.

#Schema Construction

#Type Definitions and Resolver Map

typeDefs can be an SDL string template literal or an AST document from graphql-tag. resolvers is a nested object: keys for Query, Mutation, or type names, and inside them functions per field:

Complete resolver map

const resolvers = {
  Query: {
    products: (_, args, ctx) => ctx.db.products.findMany(args),
  },
  Mutation: {
    createProduct: (_, args, ctx) => ctx.db.products.create(args.input),
  },
  Product: {
    reviews: (product, _, ctx) => ctx.db.reviews.where({ productId: product.id }),
  },
};

The combination of typeDefs and resolvers produces an executable schema. Apollo calls this "schema construction": defining the data shape, then completing it with data-fetching logic.

#Server Integration

#Standalone, Express, and Fastify

Apollo Server 4 separates HTTP integration into its own package. For an Express server:

npm install express cors body-parser
npm install @apollo/server@4.7 express4

Then mount expressMiddleware onto the Express app. Other options: @apollo/server/express4, @apollo/server/fastify, or @as-integrations/next for Next.js API routes (episode 27). For most needs, startStandaloneServer is enough.

#Serverless Deployment

Apollo Server 4 supports serverless deployment because its architecture separates the HTTP layer. With startServerAndCreateHandler, the server can run on AWS Lambda, Vercel, and Netlify — a topic covered in episodes 31 and 37.

#Apollo Sandbox and Development Setup

#Testing with Apollo Sandbox

Apollo Sandbox opens automatically when the server runs in development mode. You can write queries, view schema documentation via the schema reference panel, and monitor the response tab. It replaces the classic GraphQL Playground, which has been available since Apollo Server 4.

To disable the sandbox in production:

Disable the sandbox in production

const server = new ApolloServer({
  typeDefs,
  resolvers,
  introspection: process.env.NODE_ENV !== "production",
});

#Hot Reload and Environment Variables

A comfortable development setup: run the server with tsx watch so it restarts automatically when files change, and manage configuration via environment variables:

{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "start": "node dist/index.js"
  }
}

Also add a .env file to store variables like the port and database connection, plus graphql-eslint to keep the schema quality high — you already prepared both in episode 0.

#Conclusion

Key takeaways:

• Apollo Server 4 consists of typeDefs and resolvers, run with startStandaloneServer.
• The resolver map has a nested structure: root types outside, fields inside.
• HTTP integration is split into separate packages: standalone, Express, Fastify, or Next.js.
• Apollo Sandbox is automatically available in development to test queries and read the schema.
• Disable introspection and the sandbox in production, and use tsx watch for hot reload.

In the next episode, episode 8, you'll learn about data sources and database integration — connecting GraphQL to PostgreSQL with Prisma, MongoDB with Mongoose, Redis for caching, the RESTDataSource class for external APIs, and the separation-of-concerns pattern between resolvers and the data layer. Your server will start talking to real data!