Express integration in GraphQL - Mini Project: Build & Apply

GraphQL Express Integration

📖 Scenario: You are building a simple web server that uses GraphQL to handle requests. This server will run on Express, a popular web framework for Node.js. You want to set up a GraphQL endpoint where clients can send queries and get data about books.

🎯 Goal: Create a basic Express server with a GraphQL endpoint at /graphql. Define a simple GraphQL schema with a Book type and a query to get a list of books. Connect the schema to the Express server using the express-graphql middleware.

📋 What You'll Learn

Create an Express server instance

Define a GraphQL schema with a Book type having id, title, and author fields

Create a root query type with a books field returning a list of books

Use express-graphql middleware to connect the schema to the Express server at /graphql

Provide a sample list of books as data

💡 Why This Matters

🌍 Real World

Many modern web applications use GraphQL with Express to create flexible APIs that clients can query for exactly the data they need.

💼 Career

Understanding how to integrate GraphQL with Express is a valuable skill for backend developers building APIs for web and mobile apps.

1

Set up Express server and sample data

Create an Express server by importing express and calling express(). Then create a constant called books that is an array of objects with these exact entries: { id: '1', title: '1984', author: 'George Orwell' } and { id: '2', title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }.

GraphQL

# Import express and create an app
# Create the books array with two book objects
# Your code here

Hint

Use require('express') to import Express and call express() to create the app. Define books as an array with two objects exactly as shown.

2

Define GraphQL schema with Book type and Query

Import buildSchema from graphql. Create a constant called schema using buildSchema with this exact schema string: a Book type with id, title, and author fields all of type String!, and a Query type with a books field that returns a list of Book objects.

GraphQL

const express = require('express');
const app = express();

const books = [
  { id: '1', title: '1984', author: 'George Orwell' },
  { id: '2', title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }
];

// Import buildSchema and create schema
// Your code here

Hint

Use buildSchema to define the GraphQL schema string exactly as described. Include the Book type and the Query type with the books field.

3

Create root resolver with books query

Create a constant called root that is an object with a books function. This function should return the books array defined earlier.

GraphQL

const express = require('express');
const app = express();

const books = [
  { id: '1', title: '1984', author: 'George Orwell' },
  { id: '2', title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }
];

const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Book {
    id: String!
    title: String!
    author: String!
  }

  type Query {
    books: [Book]
  }
`);

// Create root resolver with books function
// Your code here

Hint

Define root as an object with a books function that returns the books array.

4

Connect GraphQL schema to Express with express-graphql

Import graphqlHTTP from express-graphql. Use app.use to add middleware at '/graphql' with graphqlHTTP passing an object with schema, rootValue set to root, and graphiql set to true. Finally, call app.listen on port 4000.

GraphQL

const express = require('express');
const app = express();

const books = [
  { id: '1', title: '1984', author: 'George Orwell' },
  { id: '2', title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }
];

const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Book {
    id: String!
    title: String!
    author: String!
  }

  type Query {
    books: [Book]
  }
`);

const root = {
  books: () => books
};

// Import graphqlHTTP and add middleware
// Start server on port 4000
// Your code here

Hint

Import graphqlHTTP from express-graphql. Use app.use to add the GraphQL middleware at /graphql. Pass the schema, rootValue, and enable graphiql. Finally, start the server on port 4000.

Practice

1. What is the main purpose of using express-graphql middleware in an Express app?

easy

A. To create a new database connection

B. To connect a GraphQL schema to the Express server for handling HTTP requests

C. To serve static files like images and CSS

D. To replace Express with a GraphQL server

Solution

1. Step 1: Understand the role of middleware in Express

   Middleware functions in Express handle requests and responses, adding features to the server.

2. Step 2: Identify what express-graphql does

   This middleware connects a GraphQL schema and resolvers to Express, enabling GraphQL queries over HTTP.

3. Final Answer:

   To connect a GraphQL schema to the Express server for handling HTTP requests -> Option B

4. Quick Check:

   express-graphql middleware = Connect GraphQL to Express [OK]

Hint: Middleware connects GraphQL schema to Express HTTP server [OK]

Common Mistakes:

• Thinking it creates a database connection
• Confusing it with static file serving
• Assuming it replaces Express entirely

2. Which of the following is the correct way to use express-graphql middleware in an Express app?

easy

A. app.get('/graphql', graphqlHTTP(mySchema));

B. app.use('/graphql', graphqlHTTP(schema, rootResolver));

C. app.post('/graphql', graphqlHTTP({ rootValue: rootResolver }));

D. app.use('/graphql', graphqlHTTP({ schema: mySchema, rootValue: rootResolver, graphiql: true }));

Solution

1. Step 1: Recall the correct syntax for express-graphql middleware

   The middleware is used with app.use and takes an options object with keys like schema, rootValue, and graphiql.

2. Step 2: Check each option for correct usage

   app.use('/graphql', graphqlHTTP({ schema: mySchema, rootValue: rootResolver, graphiql: true })); correctly uses app.use with an options object including schema, rootValue, and graphiql. Others either misuse method or pass wrong arguments.

3. Final Answer:

   app.use('/graphql', graphqlHTTP({ schema: mySchema, rootValue: rootResolver, graphiql: true })); -> Option D

4. Quick Check:

   express-graphql needs options object with schema and rootValue [OK]

Hint: Use app.use with options object for express-graphql [OK]

Common Mistakes:

• Using app.get or app.post instead of app.use
• Passing schema and rootValue as separate arguments
• Omitting the graphiql option during development

3. Given this Express setup with GraphQL:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

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

const app = express();
app.use('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: false }));

app.listen(4000);

What will be the JSON response to this POST query to /graphql?

{"query": "{ hello }"}

medium

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

B. {"error":"Query not found"}

C. {"data":{"hello":null}}

D. SyntaxError

Solution

1. Step 1: Understand the schema and resolver

   The schema defines a Query type with a field hello returning a String. The root resolver returns 'Hello world!' for hello.

2. Step 2: Analyze the query and response

   The query requests { hello }. The resolver returns 'Hello world!', so the response JSON includes this under data.

3. Final Answer:

   {"data":{"hello":"Hello world!"}} -> Option A

4. Quick Check:

   Query hello returns 'Hello world!' [OK]

Hint: Query matches resolver return value exactly [OK]

Common Mistakes:

• Expecting an error when schema and resolver match
• Confusing null with missing data
• Assuming graphiql affects response format

4. You wrote this Express GraphQL setup:

app.use('/graphql', graphqlHTTP({
  schema: mySchema,
  rootValue: rootResolver
}));

But when you send queries, you get an error: Cannot POST /graphql. What is the likely cause?

medium

A. You did not enable the body parser middleware for JSON

B. You did not define the schema correctly

C. You used app.get instead of app.use

D. You forgot to import express-graphql

Solution

1. Step 1: Understand the error message

   The error 'Cannot POST /graphql' means Express does not recognize POST requests to that route.

2. Step 2: Check middleware setup for POST data

   GraphQL POST requests send JSON body. Express needs body parser middleware (like express.json()) to parse JSON bodies before graphqlHTTP.

3. Final Answer:

   You did not enable the body parser middleware for JSON -> Option A

4. Quick Check:

   Missing JSON body parser causes POST errors [OK]

Hint: Always add express.json() before graphqlHTTP for POST [OK]

Common Mistakes:

• Assuming graphqlHTTP handles JSON parsing automatically
• Confusing app.use with app.get
• Blaming schema definition for routing errors

5. You want to add a new Query field user(id: ID!): User to your GraphQL schema in Express. The User type has fields id and name. Which of the following shows the correct way to extend the schema and resolver for this, assuming you have a getUserById function?

hard

A. Schema: type Query { user(id: String): User } and resolver: { user: (id) => getUserById(id) }

B. Schema: type Query { user: User } and resolver: { user: () => getUserById() }

C. Schema: type Query { user(id: ID!): User } and resolver: { user: ({id}) => getUserById(id) }

D. Schema: type Query { user(id: ID!): User } and resolver: { user: (args) => getUserById(args) }

Solution

1. Step 1: Define schema with required argument and User type

   The schema must declare user(id: ID!): User to require an ID argument and return a User object.

2. Step 2: Write resolver matching argument destructuring

   The resolver function receives an object with arguments, so destructure {id} and pass it to getUserById.

3. Final Answer:

   Schema: type Query { user(id: ID!): User } and resolver: { user: ({id}) => getUserById(id) } -> Option C

4. Quick Check:

   Schema arg ID! and resolver destructure args [OK]

Hint: Destructure args object in resolver for required ID [OK]

Common Mistakes:

• Not marking ID as non-null with !
• Passing args incorrectly in resolver
• Using wrong argument type in schema