Apollo Server setup in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

Query result from a simple Apollo Server schema

Given this Apollo Server schema and resolver, what will be the output of the query { hello }?

GraphQL

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

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

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

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

A { "data": { "hello": "Hello, world!" } }

B { "error": "Field 'hello' not found" }

C { "data": { "hello": "Hi there!" } }

D { "data": { "greeting": "Hello, world!" } }

💡 Hint

Check the resolver function for the hello field.

The resolver for hello returns the string 'Hello, world!'. So the query returns this string under the hello key.

📝 Syntax

intermediate

Identify the syntax error in Apollo Server setup

Which option contains a syntax error in the Apollo Server setup code?

GraphQL

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

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

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

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

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

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

C const typeDefs = gql` type Query { greet: String }`

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

💡 Hint

Look at the arrow function syntax inside the resolvers object.

Option D uses incorrect arrow function syntax: greet() => 'Hi!' is invalid. It should be greet: () => 'Hi!'.

❓ optimization

advanced

Optimize Apollo Server startup for large schemas

You have a large schema with many types and resolvers. Which option best improves Apollo Server startup performance?

A Disable introspection to speed up server initialization.

B Load all resolvers and type definitions eagerly at server start.

C Use code splitting and lazy loading for resolvers and typeDefs.

D Use schema stitching to combine multiple small schemas into one.

💡 Hint

Think about loading only what is needed when it is needed.

Lazy loading parts of the schema and resolvers delays loading until necessary, reducing initial startup time.

🧠 Conceptual

advanced

Understanding Apollo Server context function

What is the main purpose of the context function in Apollo Server setup?

A To specify the server port and hostname.

B To provide a shared object accessible by all resolvers during a request.

C To define the GraphQL schema types and fields.

D To handle errors thrown by resolvers.

💡 Hint

Think about what data resolvers might need access to for each request.

The context function creates an object shared by all resolvers for a single request, often used for authentication info or database connections.

🔧 Debug

expert

Debugging Apollo Server resolver error

Given this resolver code, what error will Apollo Server return when querying { user(id: "1") { name } } if the user is not found?

GraphQL

const resolvers = {
  Query: {
    user: (_, { id }) => {
      const user = database.findUserById(id);
      if (!user) {
        throw new Error('User not found');
      }
      return user;
    }
  }
};

A { "data": { "user": null }, "errors": [{ "message": "User not found" }] }

B { "error": "User not found" }

C { "data": { "user": { "name": null } } }

D { "data": null, "errors": [{ "message": "User not found" }] }

💡 Hint

Recall how Apollo Server handles errors thrown in resolvers.

When a resolver throws an error, Apollo Server sets the corresponding field to null in data and adds the error to the errors array.

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