Express integration in GraphQL - Step-by-Step Execution

Concept Flow - Express integration

Start Express Server

↓

Define GraphQL Schema

↓

Create GraphQL Resolver Functions

↓

Setup GraphQL Middleware in Express

↓

Receive HTTP Request

↓

GraphQL Middleware Processes Query

↓

Execute Resolver Functions

↓

Send Response to Client

↓

End

This flow shows how Express server integrates GraphQL by defining schema, resolvers, middleware, then handling requests and sending responses.

Execution Sample

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: true }));
app.listen(4000);

This code sets up an Express server with a GraphQL endpoint that returns 'Hello world!' for the 'hello' query.

Execution Table

Step	Action	Input	Process	Output
1	Start Express server	null	Listen on port 4000	Server running on port 4000
2	Receive HTTP request	{ query: '{ hello }' }	Pass request to /graphql middleware	Request forwarded to GraphQL middleware
3	GraphQL middleware parses query	{ hello }	Validate and parse query	Parsed query object
4	Execute resolver	hello field	Call root.hello()	Return "Hello world!"
5	Send response	Result from resolver	Format JSON response	{"data":{"hello":"Hello world!"}}
6	End request	Response sent	Close connection	Ready for next request

💡 Request completed and response sent, server continues listening

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
request	undefined	{ query: '{ hello }' }	{ query: '{ hello }' }	undefined (request handled)
parsedQuery	undefined	undefined	{ hello }	{ hello }
resolverResult	undefined	undefined	Hello world!	Hello world!
response	undefined	undefined	undefined	{"data":{"hello":"Hello world!"}}

Key Moments - 3 Insights

Why does the server keep running after sending the response?

Because Express listens continuously on the port (Step 1) and only closes the connection for each request after sending the response (Step 6), allowing it to handle more requests.

How does the GraphQL middleware know which resolver to call?

The middleware parses the query (Step 3) and matches fields like 'hello' to functions in the root resolver object (Step 4).

What happens if the query is invalid?

The middleware will return an error response instead of calling resolvers, stopping execution before Step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the output after Step 4?

A Parsed query object

B Server running on port 4000

C "Hello world!"

D Formatted JSON response

💡 Hint

Check the 'Output' column at Step 4 in the execution_table

At which step does the server send the JSON response back to the client?

A Step 5

B Step 2

C Step 3

D Step 6

💡 Hint

Look for 'Send response' action in the execution_table

If the query was invalid, which step would most likely not happen?

A Step 3: Parse query

B Step 4: Execute resolver

C Step 2: Receive HTTP request

D Step 6: End request

💡 Hint

Invalid queries stop execution before resolvers run, see key_moments explanation

Concept Snapshot

Express integration with GraphQL:
- Define GraphQL schema and resolvers
- Use express-graphql middleware on a route
- Server listens for HTTP requests
- Middleware parses queries and calls resolvers
- Responses sent as JSON
- Server stays running for more requests

Full Transcript

This visual execution trace shows how Express integrates GraphQL. First, the Express server starts and listens on port 4000. When a client sends a GraphQL query to the /graphql endpoint, Express passes the request to the GraphQL middleware. The middleware parses and validates the query, then calls the matching resolver function. The resolver returns data, which the middleware formats as a JSON response and sends back to the client. The server then closes the request connection but keeps running to handle more requests. Key moments include understanding how the middleware matches queries to resolvers and why the server stays running after sending a response.