Why server setup enables GraphQL - See It in Action

Setting Up a Server to Enable GraphQL

📖 Scenario: You are building a simple server that will allow clients to request data using GraphQL. This server will manage data about books and authors.

🎯 Goal: Create a basic server setup that enables GraphQL queries to fetch book and author information.

📋 What You'll Learn

Create a data structure to hold books and authors

Define a configuration variable for the server port

Set up the GraphQL schema with types and queries

Complete the server setup to listen for requests

💡 Why This Matters

🌍 Real World

Setting up a GraphQL server is common in web development to provide flexible APIs for client applications.

💼 Career

Understanding server setup and GraphQL schema design is essential for backend developers working with modern APIs.

1

Create the initial data structure

Create a constant called books that is an array of objects with these exact entries: { id: '1', title: '1984', authorId: '1' }, { id: '2', title: 'Animal Farm', authorId: '1' }, and { id: '3', title: 'Brave New World', authorId: '2' }. Also create a constant called authors that is an array of objects with these exact entries: { id: '1', name: 'George Orwell' } and { id: '2', name: 'Aldous Huxley' }.

GraphQL

# Your code here

Hint

Use const to create arrays named books and authors with the exact objects.

2

Add server configuration variable

Create a constant called PORT and set it to 4000 to specify the server port number.

GraphQL

const books = [
  { id: '1', title: '1984', authorId: '1' },
  { id: '2', title: 'Animal Farm', authorId: '1' },
  { id: '3', title: 'Brave New World', authorId: '2' }
];

const authors = [
  { id: '1', name: 'George Orwell' },
  { id: '2', name: 'Aldous Huxley' }
];

# Your code here

Hint

Use const PORT = 4000; to set the server port.

3

Define GraphQL schema with types and queries

Create a constant called typeDefs that defines a GraphQL schema string with types Book and Author. Include fields id and title for Book, and id and name for Author. Add a Query type with fields books returning a list of Book and authors returning a list of Author.

GraphQL

const books = [
  { id: '1', title: '1984', authorId: '1' },
  { id: '2', title: 'Animal Farm', authorId: '1' },
  { id: '3', title: 'Brave New World', authorId: '2' }
];

const authors = [
  { id: '1', name: 'George Orwell' },
  { id: '2', name: 'Aldous Huxley' }
];

const PORT = 4000;

# Your code here

Hint

Use a template string to define typeDefs with the required GraphQL types and query fields.

4

Complete the server setup to listen for requests

Import ApolloServer from @apollo/server and create a new ApolloServer instance called server using typeDefs and resolvers that return the books and authors arrays for the books and authors queries. Then call server.listen({ port: PORT }) to start the server.

GraphQL

const books = [
  { id: '1', title: '1984', authorId: '1' },
  { id: '2', title: 'Animal Farm', authorId: '1' },
  { id: '3', title: 'Brave New World', authorId: '2' }
];

const authors = [
  { id: '1', name: 'George Orwell' },
  { id: '2', name: 'Aldous Huxley' }
];

const PORT = 4000;

const typeDefs = `
  type Book {
    id: ID!
    title: String!
    authorId: ID!
  }

  type Author {
    id: ID!
    name: String!
  }

  type Query {
    books: [Book]
    authors: [Author]
  }
`;

# Your code here

Hint

Import ApolloServer, define resolvers returning the data arrays, create the server instance, and start listening on the port.

Practice

1. Why is a server setup necessary for GraphQL to work?

easy

A. Because it stores all the data permanently

B. Because it connects the schema with resolvers to fetch data

C. Because it runs the client-side user interface

D. Because it automatically creates database tables

Solution

1. Step 1: Understand GraphQL server role

   The server connects the schema (which defines data shape) with resolvers (which fetch data).

2. Step 2: Identify why server is needed

   Without the server, queries cannot be processed or return data because no connection exists between schema and data sources.

3. Final Answer:

   Because it connects the schema with resolvers to fetch data -> Option B

4. Quick Check:

   Server links schema and resolvers = Because it connects the schema with resolvers to fetch data [OK]

Hint: Server links schema and data fetch logic [OK]

Common Mistakes:

• Thinking server stores all data permanently
• Confusing server with client UI
• Assuming server auto-creates database tables

2. Which of the following is the correct minimal setup to start a GraphQL server?

easy

A. Write client UI code and connect to database directly

B. Install GraphQL client library without server code

C. Create database tables and insert data only

D. Define schema, write resolvers, and start server listening

Solution

1. Step 1: Identify GraphQL server components

   A GraphQL server needs a schema (data shape), resolvers (how to get data), and a running server to listen for queries.

2. Step 2: Match setup with options

   Only Define schema, write resolvers, and start server listening includes all these parts correctly.

3. Final Answer:

   Define schema, write resolvers, and start server listening -> Option D

4. Quick Check:

   Schema + resolvers + server = Define schema, write resolvers, and start server listening [OK]

Hint: Server needs schema, resolvers, and listening start [OK]

Common Mistakes:

• Confusing client code with server setup
• Thinking database setup alone is enough
• Ignoring the need to start server listening

3. Given this GraphQL server setup snippet, 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 schema definition

B. { "error": "hello field not found" }

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

D. Server fails to start due to missing resolver

Solution

1. Step 1: Analyze schema and resolver

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

2. Step 2: Predict query output

   Querying { hello } will return data with hello: 'Hi there!'. No errors expected.

3. Final Answer:

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

4. Quick Check:

   Query matches resolver output = { "data": { "hello": "Hi there!" } } [OK]

Hint: Match query field with resolver return value [OK]

Common Mistakes:

• Expecting error when schema and resolver match
• Confusing server start logs with query output
• Assuming missing schema error without checking code

4. What is wrong with this GraphQL server setup code?

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

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

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

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

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

medium

A. Resolver field 'hello' does not match schema field 'greeting'

B. Missing server.listen() call

C. Schema is missing Query type

D. ApolloServer is not imported correctly

Solution

1. Step 1: Compare schema and resolver fields

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

2. Step 2: Identify mismatch impact

   This mismatch means queries for 'greeting' have no resolver, causing errors or null results.

3. Final Answer:

   Resolver field 'hello' does not match schema field 'greeting' -> Option A

4. Quick Check:

   Schema and resolver fields must match exactly = Resolver field 'hello' does not match schema field 'greeting' [OK]

Hint: Schema and resolver field names must match [OK]

Common Mistakes:

• Ignoring field name mismatch
• Thinking server.listen() is missing
• Assuming import errors without checking code

5. You want to extend a GraphQL server to fetch user data from a database. Which server setup step is essential to enable this?

hard

A. Add resolvers that query the database and connect them to the schema fields

B. Only update the client UI to request user data

C. Create database tables but do not change resolvers

D. Remove the existing schema and write raw SQL queries in the client

Solution

1. Step 1: Understand server role in data fetching

   The server uses resolvers to fetch data from sources like databases and returns it per schema fields.

2. Step 2: Identify necessary setup for database fetching

   To fetch user data, resolvers must be added or updated to query the database and linked to schema fields representing user data.

3. Final Answer:

   Add resolvers that query the database and connect them to the schema fields -> Option A

4. Quick Check:

   Resolvers connect schema to database = Add resolvers that query the database and connect them to the schema fields [OK]

Hint: Resolvers must fetch data and match schema fields [OK]

Common Mistakes:

• Updating client UI without server changes
• Creating tables without resolver updates
• Removing schema and using raw SQL in client