Apollo Server setup in GraphQL

Introduction

Apollo Server helps you create a GraphQL API easily. It connects your data to clients in a simple way.

You want to build a flexible API for your app or website.

You need to fetch data from a database and send only what clients ask for.

You want to combine data from different sources into one API.

You want to test and explore your API with a friendly interface.

You want to add real-time updates with subscriptions.

Syntax

GraphQL

import { ApolloServer } from '@apollo/server';

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

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

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

await server.start();

// Then connect server to your HTTP framework (like Express or Fastify)

typeDefs defines the data types and queries clients can ask.

resolvers tell the server how to get the data for each query.

Examples

This example changes the query name to greeting and returns a different message.

GraphQL

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

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

This example shows a query that returns a number instead of text.

GraphQL

const typeDefs = `
  type Query {
    number: Int
  }
`;

const resolvers = {
  Query: {
    number: () => 42
  }
};

Sample Program

This program sets up a simple Apollo Server with one query called hello. When you run it, the server is ready to answer with 'Hello world!'.

GraphQL

import { ApolloServer } from '@apollo/server';

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

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

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

await server.start();

console.log('Apollo Server is ready to handle requests.');

Important Notes

You need to connect Apollo Server to an HTTP server like Express or Fastify to handle real requests.

Always start the server with await server.start() before using it.

Use GraphQL playground or Apollo Studio to test your queries easily.

Summary

Apollo Server makes creating GraphQL APIs simple and fast.

Define your data structure with typeDefs and how to get data with resolvers.

Start the server and connect it to your web server to serve client requests.

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