Code-first GraphQL Server Development with Prisma

Code-ﬁrst
GraphQL Server Development
with Prisma
@nikolasburk

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

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

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, ...)

GraphQL schemas come
● Type deﬁnitions
(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"
})
}

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 }
}
})
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(() => {
})
apollo-server
const server = new ApolloServer({ schema })
server.listen({ port: 4000 }, () =>
)
GRAPHQL SCHEMA GRAPHQL SERVERS (HTTP)

This talk is about the
different ways to create a
GraphQLSchema

SDL-ﬁrst & code-ﬁrst
GraphQL schema construction
2

Schema Deﬁnition Language
type User {
id: ID!
name: String
}
SDL

a GraphQLSchema
How do I create
?
🤔

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

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

Schema-driven development can
be applied to both approaches:
SDL-ﬁrst and Code-ﬁrst

Illustrating code-ﬁrst & SDL-ﬁrst
graphql-js
const User = new GraphQLObjectType({
name: 'User',
fields: {
id: { type: GraphQLID },
name: { type: GraphQLString }
}
})
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

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

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

SDL-ﬁrst problems & tools to ﬁx 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, ...

Workarounds, workarounds, workarounds, ...

We already have a
solution! 💡

The only tool you need is your
programming language
Problem
✘ Inconsistencies
✘ Modularization
✘ Importing
✘ Composition
✘ Tooling / IDE support
Solution (SDL-ﬁrst)
✓ 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-ﬁrst)

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

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 ��

Code-ﬁrst is idiotiomatic to
programming languages
Scala
(Sangria)
Python
(graphene)
Ruby
(graphql-ruby)

3
Code-ﬁrst in practice
with Prisma

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

Code-first GraphQL Server Development with Prisma

Prisma is not opinionated on
code-ﬁrst & SDL-ﬁrst! 🤷

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

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

Thank you 🙏
@nikolasburk@nikolasburk

Code-first GraphQL Server Development with Prisma

More Related Content

Code-first GraphQL Server Development with Prisma