Building scalable, type-safe GraphQL servers from scratch Johannes Schickling, Founder & CEO, Prisma Apply to be a speaker here - https://apidays.typeform.com/to/J1snsg

1. A practical introduction to
GraphQL server development

2. Agenda
2 Introduction to Nexus + Demo
1 Overview: GraphQL server development
3 Type-safe DB access with Prisma + Demo

3. Johannes Schickling
San Francisco/Berlin
Co-founder & CEO @prisma
@schickling@schickling

4. Building the data layer for
modern applications
OUR MISSION

5. Auto-generated, type-safe
database client library
Prisma Client
ACCESS
Visual database tooling
and management
Prisma Admin
MANAGE
Declarative data modeling
and migrations
Prisma Migrate
MIGRATE

6. GraphQL server
development

7. • HTTP Server – Extracts GraphQL query
and invokes GraphQL engine
• GraphQL Exec Engine – Calls resolvers
in right order & builds response
• Schema & Resolvers – Defined and
implemented by user to fetch data
How GraphQL
servers work
RECAP

8. TLDR: How to build a GraphQL server
2 Main task: Define and implement schema
1 Pick a GraphQL server framework

9. What’s a GraphQL schema?
• Defines the structure of your GraphQL API
(Ask: What can I query for?)
• Foundation for resolver functions
• Intuitive representation as GraphQL SDL
• Defined programmatically or declaratively
type Query {
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
}

10. The history of GraphQL servers
GraphQL released
with graphql.js
2015

11. graphql-js
type Query {
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
}

12. graphql-js
const Query = new GraphQLObjectType({
name: "Query",
fields: () => ({
posts: {
type: new GraphQLNonNull(
new GraphQLList(
new GraphQLNonNull(Post)
)
)
}
})
})
const Post = new GraphQLObjectType({
name: "Post",
fields: () => ({
id: { type: new GraphQLNonNull(GraphQLID) },
title: { type: new GraphQLNonNull(GraphQLString) },
content: { type: new GraphQLNonNull(GraphQLString) }
})
})
type Query {
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
}

13. graphql-js
GraphQL reference implementation for JavaScript
AST-like API to construct schema → foundation for tooling
Verbose API when building applications

14. The rise of schema-first
GraphQL released
with graphql.js
2015
Schema-first
with graphql-tools
2016

15. Schema-first
Handwritten expressive schema as
“contract" for resolvers
Schema (SDL)
SOURCE OF TRUTH
EXAMPLES
Apollo Server (JS), graphql-java,
gqlgen (Go)
type Query {
posts: [Post]
}
type Post {
id: ID!
slug: String!
content: String!
}
const resolvers = {
Query: {
posts: () => [{ ... }]
},
Post: {
id: parent => parent.id,
title: parent => parent.title,
content: parent => parent.content
}
}
Resolvers have to match SDL

16. const resolvers = {
Query: {
posts: (parent, args, context) => {
return context.prisma.posts({
where: { published: true }
})
},
},
Post: {
author: ({ id }, args, context) => {
return context.prisma.post({ id }).author()
},
},
User: {
posts: ({ id }, args, context) => {
return context.prisma.user({ id }).posts()
},
},
}
schema.graphql resolvers.js
type Query {
posts: [Post!]!
}
type Post {
title: String!
content: String
published: Boolean!
author: User!
}
type User {
email: String!
name: String
posts: [Post!]!
}

17. But…
Schema-first comes with
other problems. 🙈

18. const resolvers = {
Query: {
posts: (parent, args, context) => {
return context.prisma.posts({
where: { published: true }
})
},
},
Post: {
author: ({ id }, args, context) => {
return context.prisma.post({ id }).author()
},
},
User: {
posts: ({ id }, args, context) => {
return context.prisma.user({ id }).posts()
},
},
}
type Query {
feed: [Post!]!
}
type Post {
title: String!
content: String
published: Boolean!
author: User!
}
type User {
email: String!
name: String
posts: [Post!]!
}
Inconsistencies between SDL and Resolvers

19. schema {
query: Query
mutation: Mutation
subscription: Subscription
}
# The query type, represents all of the entry points into our object graph
type Query {
hero(episode: Episode): Character
reviews(episode: Episode!): [Review]
search(text: String): [SearchResult]
character(id: ID!): Character
droid(id: ID!): Droid
human(id: ID!): Human
starship(id: ID!): Starship
}
# The mutation type, represents all updates we can make to our data
type Mutation {
createReview(episode: Episode, review: ReviewInput!): Review
}
# The subscription type, represents all subscriptions we can make to our data
type Subscription {
reviewAdded(episode: Episode): Review
How to deal with large schemas?

20. “Fixing” schema-first
GraphQL released
with graphql.js
2015
Schema-first
with graphql-tools
2016
More schema-first
libraries / tooling
2017 / 2018

22. Schema-first problems & tools to fix them
Inconsistencies: graphqlgen, graphql-code-generator, …
Modularization: graphql-modules, schema stitching, …
Importing: graphql-import, …
Code reuse: Schema directives, …
Tooling/IDE support: gql-tag, …
Solution: Programming languages 🙌

23. Lessons learned: Resolver-first
GraphQL released
with graphql.js
2015
Schema-first
with graphql-tools
2016
Schema-first
“workarounds”
2017 / 2018
Resolver-first
frameworks
2018 / 2019

24. Resolver-first
Schema derived from language
type-system or annotations
Resolvers (code)
SOURCE OF TRUTH
EXAMPLES
Nexus (JS/TS), Sangira (Scala),
Graphene (Python)
const Post = objectType('Post', t => {
t.id('id')
t.string(‘title')
t.string(‘content')
})
type Post {
id: ID!
slug: String!
content: String!
}
SDL is auto-generated

25. Demo
2 Define & implement schema
3 Connect to database
1 Set up new project with Nexus

26. Example Requirements

27. Public Preview: github.com/graphql-nexus/nexus
Nexus
A type-safe, resolver-first GraphQL schema
framework for TypeScript/JavaScript
Example: bit.ly/nexus-example

28. Features of Nexus
Smart schema-building (i.e. no-circular dependencies)
Full type-safety in TypeScript & JavaScript (using VSC)
Enables powerful module & plugin system

29. Schema building with Nexus
• Concise & intuitive API
• Type references expressed as
type-safe strings (“literals”)
• Supports custom scalars
interfaces, unions & mixins
const Query = objectType('Query', t => {
t.field('posts', 'Post', { list: true })
})
const Post = objectType('Post', t => {
t.id('id')
t.string('title')
t.string('content')
})

30. Type-safety in Nexus
• Provides predictability and extends GraphQL’s type system
• Speeds up development (even in prototyping stage)
• Based on built-in, self-updating type generation (disabled in prod)
• Type-safe “areas”
• Resolvers: Parent values, arguments, context, return values
• Type <> Model mapping
• Nexus API: Configuration & schema building

31. End-to-end type-safety
✨ Holy Grail ✨
Map safely from one system/language
into another. Ideally from row in database
up to props in React component.
GOAL
Use code-generation to
avoid type mismatches.
STRATEGY

32. Type-safe database
access with Prisma

33. Removes one of the most common causes of downtime
Fixes biggest bottleneck: API <> DB mapping
Makes most DB integration tests obsolete
Why type-safe DB access?

34. Access any DB
from any language
DB introspection-based
or user-defined
Auto-generated, type-safe
client library
High performance
query engine

35. GraphQL servers with Prisma

36. How Prisma works
Introspect
schema
2 Generate
client
3 Start
building
41 Connect
database

37. Demo
2 Define & implement schema
3 Connect to database
1 Set up new project with Nexus

38. Key Takeaways
3 Type-safe DB access prevents downtime
and speeds up development with great DX
Schema-first vs resolver-first1
2 Nexus: Resolver-first GraphQL framework

39. We’re hiring
prisma.io/jobs
👋
BerlinSan Francisco

40. Thank you 🙏
@nikolasburk@nikolasburk

41. Thank you 🙏
@schickling@schickling