1.
Code-first
GraphQL Server Development
with Prisma
@nikolasburk

2.
Nikolas Burk
Based in Berlin
Developer Relations at @prisma
@nikolasburk@nikolasburk

3.
Introduction: What are we talking about?
SDL-first & code-first GraphQL schema construction
Code-first GraphQL server development with Prisma
Agenda
1
2
3

4.
What are we
talking about?
1

5.
Anatomy of a GraphQL server
Server (e.g. HTTP)
Process HTTP requests, extract
operation, return HTTP response ...
GraphQL schema
Operations + Data structures
(types, inputs, enums, ...)

6.
GraphQL schemas come
● Type definitions
(root) types, inputs, enums, …
● Resolver functions
CONSISTS OF
graphql-jsfrom
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Query',
fields: {
user: {
type: UserType,
resolve: () => ({
id: 1,
name: "Alice"
})
}

7.
A GraphQL schema is at the
core of every GraphQL server
graphql-js
const UserType = new GraphQLObjectType({
name: 'User',
fields: {
id: { type: GraphQLID },
name: { type: GraphQLString }
}
})
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Query',
fields: {
user: {
type: UserType,
resolve: () => ({ id: 1, name: "Alice" })
}
}
})
})
express-graphql
const app = express()
app.use(‘/graphql’, graphqlHTTP({ schema }))
app.listen(4000, () => {
console.log(“Server ready at http://localhost:4000”)
})
graphql-yoga
const server = new GraphQLServer({ schema })
server.start(() => {
console.log(“Server ready at http://localhost:4000”)
})
apollo-server
const server = new ApolloServer({ schema })
server.listen({ port: 4000 }, () =>
console.log(“Server ready at http://localhost:4000”)
)
GRAPHQL SCHEMA GRAPHQL SERVERS (HTTP)

8.
This talk is about the
different ways to create a
GraphQLSchema

9.
SDL-first & code-first
GraphQL schema construction
2

10.
Schema Definition Language
type User {
id: ID!
name: String
}
SDL

11.
a GraphQLSchema
How do I create
?
🤔

12.
Schema-first & code-first
CLARIFYING TERMINOLOGY
Schema-first
GraphQL schema is defined as a string
and resolvers are mapped to it
Code-first (resolver-first)
GraphQL schema is defined and
implemented programmatically

13.
Schema-first
GraphQL schema is defined as a string
and resolvers are mapped to it
Code-first (resolver-first)
GraphQL schema is defined and
implemented programmatically
CLARIFYING TERMINOLOGY
SDL
Schema-driven
Schema design is a priority in the development process
SDL-first & code-first

14.
Schema-driven development can
be applied to both approaches:
SDL-first and Code-first

15.
Illustrating code-first & SDL-first
graphql-js
const User = new GraphQLObjectType({
name: 'User',
fields: {
id: { type: GraphQLID },
name: { type: GraphQLString }
}
})
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Query',
fields: {
users: {
type: new GraphQLList(User),
resolve: () => ([{
id: 1,
name: "Alice"
}])
}
}
})
})
const typeDefs = `
type User {
id: ID!
name: String
}
type Query {
users: [User]
}
`
const resolvers = {
Query: {
users: () => ([{ id: 1, name: “Alice” }])
}
}
const schema = makeSchema({
typeDefs,
resolvers
})
graphql-tools
const User = objectType({
name: "User",
definition(t) {
t.id("id")
t.string("name")
},
})
const Query = queryType({
definition(t) {
t.list.field("users", {
type: "User",
resolve: () => ([{ id: 1, name: 'Alice' }])
})
},
})
const schema = makeSchema({
types: [Query, User]
})
nexus

16.
SDL-first has great benefits ...
✓ Schema definition as API documentation
✓ Schema definition as cross-team communication tool
✓ Schema definition enables quick mocking of an API
✓ GraphQL schema-design is not an afterthought

17.
… but also some issues
How many errors can you find
in this GraphQL schema
implementation?
AUDIENCE PARTICIPATION
SOLUTION 💡
https://pris.ly/b/graphqlgen

18.
SDL-first problems & tools to fix them
Problem
✘ Inconsistencies
✘ Modularization
✘ Importing
✘ Composition
✘ Tooling / IDE support
Solution
✓ Static analysis, code generation
(e.g. graphql-code-generator, ...)
✓ graphql-modules
✓ graphql-import
✓ Schema stitching/federation, ...
✓ VS Code plugins, graphql-tag, ...

19.
Workarounds, workarounds, workarounds, ...

20.
We already have a
solution! 💡

21.
The only tool you need is your
programming language
Problem
✘ Inconsistencies
✘ Modularization
✘ Importing
✘ Composition
✘ Tooling / IDE support
Solution (SDL-first)
✓ Static analysis, code generation
(e.g. graphql-code-generator, ...)
✓ graphql-modules
✓ graphql-import
✓ Schema stitching/federation, ...
✓ VS Code plugins, graphql-tag, ...
✓ Programming language
Solution (Code-first)
✓ Programming language
✓ Programming language
✓ Programming language
✓ Programming language

22.
SDL doesn’t go away when
using a code-first approach!
(It just becomes a generated artifact instead of
being manually maintained)

23.
Reviewing SDL-first benefits
Benefit
Schema definition as API documentation
SDL-first Code-first
Schema definition as cross-team communication tool
Schema definition enables quick mocking of an API
GraphQL schema-design is not an afterthought ��

24.
Code-first is idiotiomatic to
programming languages
Scala
(Sangria)
Python
(graphene)
Ruby
(graphql-ruby)

25.
3
Code-first in practice
with Prisma

26.
GraphQLSchema
to connect it to a database
The different ways to create
THIS TALK IS ABOUT
a and how

27.
Prisma is not opinionated on
code-first & SDL-first! 🤷

28.
Nexus + Prisma = ❤
✓ Saves tons of boilerplate (CRUD, type definitions, ...)
✓ Flexible API design
✓ End-to-end type safety

29.
🍿 Demo

30.
Data Access
(ORM)
GraphQL
schema
GraphQL
server (HTTP)
Database
The Demo Stack
WHAT WE’LL BUILD

31.
prisma.io/blog
READ MORE ON

32.
Thank you 🙏
@nikolasburk@nikolasburk