Apollo Server setup in GraphQL - Mini Project: Build & Apply

Apollo Server Setup

📖 Scenario: You are building a simple GraphQL server to manage a small collection of books. This server will allow clients to query book information.

🎯 Goal: Create a basic Apollo Server setup with a simple schema and resolver to serve book data.

📋 What You'll Learn

Create a list of books with exact titles and authors

Define a GraphQL schema with a Book type and a Query type

Implement a resolver to return the list of books

Set up Apollo Server to use the schema and resolvers

💡 Why This Matters

🌍 Real World

GraphQL servers like Apollo Server are used to create flexible APIs that clients can query for exactly the data they need.

💼 Career

Understanding Apollo Server setup is essential for backend developers working with modern APIs and full-stack JavaScript applications.

1

Create the initial book data

Create a constant called books that is an array of objects with these exact entries: { title: "The Odyssey", author: "Homer" }, { title: "1984", author: "George Orwell" }, and { title: "To Kill a Mockingbird", author: "Harper Lee" }.

GraphQL

# Create the 'books' array with the specified book objects
# Your code here

Hint

Use const books = [ ... ] with objects inside the array.

2

Define the GraphQL schema

Create a constant called typeDefs using the gql template literal tag. Define a Book type with title and author fields of type String!. Define a Query type with a books field that returns a list of Book objects.

GraphQL

const books = [
  { title: "The Odyssey", author: "Homer" },
  { title: "1984", author: "George Orwell" },
  { title: "To Kill a Mockingbird", author: "Harper Lee" }
];

// Define the GraphQL schema using gql
// Your code here

Hint

Use const typeDefs = gql`...` with the schema definition inside backticks.

3

Create the resolver for books

Create a constant called resolvers that defines a Query object with a books function returning the books array.

GraphQL

const books = [
  { title: "The Odyssey", author: "Homer" },
  { title: "1984", author: "George Orwell" },
  { title: "To Kill a Mockingbird", author: "Harper Lee" }
];

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Book {
    title: String!
    author: String!
  }

  type Query {
    books: [Book]
  }
`;

// Create the resolvers object
// Your code here

Hint

Define resolvers with a Query field that returns the books array.

4

Set up and start Apollo Server

Import ApolloServer from apollo-server. Create a new ApolloServer instance called server using the typeDefs and resolvers. Call server.listen() and handle the returned promise to log the server URL.

GraphQL

const books = [
  { title: "The Odyssey", author: "Homer" },
  { title: "1984", author: "George Orwell" },
  { title: "To Kill a Mockingbird", author: "Harper Lee" }
];

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Book {
    title: String!
    author: String!
  }

  type Query {
    books: [Book]
  }
`;

const resolvers = {
  Query: {
    books: () => books
  }
};

// Import ApolloServer, create server, and start listening
// Your code here

Hint

Use new ApolloServer({ typeDefs, resolvers }) and server.listen() with a then callback.

Practice

1. What is the main purpose of Apollo Server in a GraphQL application?

easy

A. To manage user authentication only

B. To style the frontend user interface

C. To store data in a database

D. To create and run a GraphQL API server

Solution

1. Step 1: Understand Apollo Server's role

   Apollo Server is designed to create and run GraphQL APIs, handling client requests and responses.

2. Step 2: Differentiate from other roles

   Styling UI, storing data, or managing authentication are separate concerns not handled by Apollo Server itself.

3. Final Answer:

   To create and run a GraphQL API server -> Option D

4. Quick Check:

   Apollo Server = GraphQL API server [OK]

Hint: Apollo Server runs GraphQL APIs, not UI or database [OK]

Common Mistakes:

• Confusing Apollo Server with frontend tools
• Thinking Apollo Server stores data
• Assuming Apollo Server only handles authentication

2. Which of the following is the correct way to import ApolloServer from the Apollo Server package in a Node.js project?

easy

A. import ApolloServer from 'apollo-server';

B. const ApolloServer = require('apollo-server');

C. const { ApolloServer } = require('apollo-server');

D. import { ApolloServer } from 'apollo-server';

Solution

1. Step 1: Identify correct CommonJS import syntax

   In Node.js using CommonJS, destructuring import is done with const { ApolloServer } = require('apollo-server');.

2. Step 2: Check other options

   import { ApolloServer } from 'apollo-server'; is ES module syntax, const ApolloServer = require('apollo-server'); incorrectly assigns the entire module, import ApolloServer from 'apollo-server'; misses destructuring.

3. Final Answer:

   const { ApolloServer } = require('apollo-server'); -> Option C

4. Quick Check:

   CommonJS import with destructuring = const { ApolloServer } = require('apollo-server'); [OK]

Hint: Use destructuring with require for ApolloServer in Node.js [OK]

Common Mistakes:

• Using ES module import in CommonJS environment
• Not destructuring ApolloServer from the package
• Assigning require result directly without destructuring

3. Given the following Apollo Server setup code, what will be the output when querying { hello }?

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`type Query { hello: String }`;

const resolvers = { Query: { hello: () => 'Hi there!' } };

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

server.listen().then(({ url }) => console.log(`Server ready at ${url}`));

medium

A. SyntaxError: Missing resolver for 'hello'

B. { "data": { "hello": "Hi there!" } }

C. { "data": { "hello": "Hello World" } }

D. Server fails to start due to missing typeDefs

Solution

1. Step 1: Analyze typeDefs and resolvers

   The schema defines a Query type with a 'hello' field returning String. The resolver returns 'Hi there!'.

2. Step 2: Predict query response

   Querying { hello } returns the resolver's string 'Hi there!' wrapped in data JSON.

3. Final Answer:

   { "data": { "hello": "Hi there!" } } -> Option B

4. Quick Check:

   Query { hello } = 'Hi there!' response [OK]

Hint: Resolver return value matches query response [OK]

Common Mistakes:

• Assuming default 'Hello World' response
• Thinking missing resolver causes syntax error
• Confusing server start errors with query output

4. Identify the error in this Apollo Server setup code snippet:

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`type Query { greeting: String }`;

const resolvers = { Query: { greet: () => 'Hello!' } };

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

server.listen().then(({ url }) => console.log(`Server ready at ${url}`));

medium

A. The resolver field name 'greet' does not match the schema field 'greeting'

B. Missing import of ApolloServer

C. Syntax error in typeDefs definition

D. Server.listen() is missing a callback function

Solution

1. Step 1: Compare schema and resolver fields

   The schema defines a Query field named 'greeting', but the resolver defines 'greet'. They must match exactly.

2. Step 2: Understand impact of mismatch

   This mismatch causes the 'greeting' field to have no resolver, resulting in null or error responses.

3. Final Answer:

   The resolver field name 'greet' does not match the schema field 'greeting' -> Option A

4. Quick Check:

   Schema and resolver field names must match [OK]

Hint: Schema and resolver field names must be identical [OK]

Common Mistakes:

• Assuming resolver names can differ from schema
• Ignoring case sensitivity in field names
• Thinking server.listen() needs a callback argument

5. You want to extend your Apollo Server to fetch user data from a database. Which setup correctly integrates a data source into Apollo Server?

hard

A. Pass a dataSources function returning an object with your database API instance to ApolloServer constructor

B. Add database queries directly inside typeDefs

C. Define database connection inside gql template literal

D. Call database queries inside server.listen() callback

Solution

1. Step 1: Understand Apollo Server dataSources option

   Apollo Server accepts a dataSources function that returns objects to access external data, like databases.

2. Step 2: Evaluate other options

   Database queries do not belong in typeDefs or gql strings, and server.listen() is for starting the server, not querying data.

3. Final Answer:

   Pass a dataSources function returning an object with your database API instance to ApolloServer constructor -> Option A

4. Quick Check:

   Use dataSources to connect databases in Apollo Server [OK]

Hint: Use dataSources function to add databases to Apollo Server [OK]

Common Mistakes:

• Putting queries inside schema definitions
• Trying to query database in server.listen callback
• Ignoring Apollo Server's dataSources feature