Schema-first development in GraphQL - Step-by-Step Execution

Concept Flow - Schema-first development

Define Schema

↓

Generate Server Code

↓

Implement Resolvers

↓

Run Server

↓

Client Queries

↓

Server Resolves Queries

↓

Return Data to Client

Start by writing the schema, then generate server code, implement resolvers, run the server, and finally handle client queries.

Execution Sample

GraphQL

type Query {
  hello: String
}

// Example resolver implementation (JavaScript):
const resolvers = {
  Query: {
    hello: () => "Hello, world!"
  }
};

Defines a schema with a 'hello' query and implements a resolver returning a greeting.

Execution Table

Step	Action	Input/Code	Result/Output
1	Define schema	type Query { hello: String }	Schema with Query type and hello field created
2	Generate server code	Generate types and server stubs	Server code skeleton ready
3	Implement resolver	hello: () => "Hello, world!"	Resolver returns greeting string
4	Run server	Start GraphQL server	Server listens for queries
5	Client sends query	{ hello }	Server receives query
6	Server resolves query	Call hello resolver	"Hello, world!" returned
7	Return data	Send response to client	{ "data": { "hello": "Hello, world!" } }

💡 Execution ends after server returns data to client

Variable Tracker

Variable	Start	After Step 3	After Step 6	Final
Schema	undefined	Defined with Query and hello	Defined	Defined
Server Code	undefined	Skeleton with resolver	Skeleton with resolver	Running server
Resolver hello	undefined	Function returning greeting	Function called, returns greeting	Returns greeting
Client Query	undefined	undefined	Query sent: { hello }	Query processed
Response	undefined	undefined	undefined	{"data":{"hello":"Hello, world!"}}

Key Moments - 3 Insights

Why do we define the schema before writing resolver code?

Because the schema defines the shape of data and queries, guiding the resolver implementation as shown in execution_table step 1 and 3.

What happens if the resolver does not match the schema?

The server may throw errors or return null data, since the schema and resolver must align, as seen in step 3 and 6.

Why is the client query sent after the server runs?

Because the server must be running to accept queries, as shown in steps 4 and 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output at step 6?

A Server code skeleton ready

B "Hello, world!" returned

C Schema with Query type and hello field created

D Server listens for queries

💡 Hint

Check the 'Result/Output' column at step 6 in the execution_table

At which step does the client send the query?

A Step 3

B Step 2

C Step 5

D Step 7

💡 Hint

Look for 'Client sends query' in the 'Action' column of execution_table

If the resolver function returned null, which step's output would change?

A Step 6

B Step 4

C Step 1

D Step 2

💡 Hint

Resolver output is shown in step 6 'Result/Output' column

Concept Snapshot

Schema-first development:
1. Write GraphQL schema first.
2. Generate server code from schema.
3. Implement resolvers matching schema.
4. Run server to accept queries.
5. Client queries server, server returns data.
Key: Schema guides all development steps.

Full Transcript

Schema-first development in GraphQL starts by defining the schema that describes the data and queries. Next, server code is generated based on this schema. Developers then implement resolver functions that fulfill the schema's queries. After running the server, clients send queries that the server resolves using the implemented resolvers, returning data back to the client. This approach ensures the API contract is clear and guides the entire development process.