GraphQL & Prisma from Scratch

1. Prisma & GraphQL
from Scratch
@nikolasburk

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

3. GraphQL Introduction
Understanding GraphQL Servers
Building GraphQL Servers with Prisma
Agenda
1
2
3
@nikolasburk

4. GraphQL Introduction
@nikolasburk

5. What is GraphQL?
New API standard developed by Facebook
Specification for type system & query language
Core primitives: Query, Mutation & Subscription

6. Why use GraphQL?
Strongly typed schema for your API
Query exactly the data you need
Rich tooling ecosystem & great community

7. query {
user(id: “user123”) {
name
posts {
title
}
}
}
HTTP POST
{
"data" :{
"user": {
"name": "Sarah",
"posts": [
{ "title": "Join us for GraphQL Europe" },
{ "title": "GraphQL is the future of APIs" },
]
}
}
}

8. Learn more 💡
http://bit.ly/top-5-reasons-for-graphql
Top 5 Reasons To Use GraphQL
https://www.howtographql.com/basics/0-introduction/
GraphQL Introduction
@nikolasburk

9. 🍿 Demo

10. Definition: The GraphQL schema
Implementation: Resolver functions
Setup: Framework, Network (HTTP), Middleware…
3 parts of a GraphQL server
1
2
3

11. Understanding
GraphQL Servers
@nikolasburk

12. 1 The GraphQL Schema
Strongly typed & written in GraphQL
Schema Definition Language (SDL)
Defines API capabilities (contract for
client-server communication)
Special root types: Query, Mutation,
Subscription

13. Example: Hello World
type Query {
hello: String!
}
GRAPHQL SCHEMA
query {
hello
}
QUERY
{
“hello”: “Hello World”
}
RESPONSE

14. type User {
id: ID!
name: String!
}
type Query {
user(id: ID!): User
users: [User!]!
}
type Mutation {
createUser(name: String!): User!
updateUser(id: ID!, name: String!): User
deleteUser(id: ID!): User
}
Example: CRUD for User type

15. type User {
id: ID!
name: String!
}
type Query {
user(id: ID!): User
users: [User!]!
}
type Mutation {
createUser(name: String!): User!
updateUser(id: ID!, name: String!): User
deleteUser(id: ID!): User
}
query {
user(id: “user123”) {
name
}
}
{
“user”: {
“name”: “Sarah”
}
}
Example: CRUD for User type

16. 2 Resolver functions
Concrete implementation of the API
One resolver function per field in SDL schema
Query execution: Invoke resolvers for all fields in query

17. type Query {
hello: String!
}
GRAPHQL SCHEMA
const resolvers = {
Query: {
hello: () => `Hello World`
}
}
RESOLVER FUNCTIONS
Example: Hello World

18. GRAPHQL SCHEMA
type Query {
user(id: ID!): User
users: [User!]!
}
type Mutation {
createUser(name: String!): User!
updateUser(id: ID!, name: String!): User
deleteUser(id: ID!): User
}
type User {
id: ID!
name: String!
}
RESOLVER FUNCTIONS
const resolvers = {
Query: {
user: (root, args) => db.getUser(args.id),
users: () => db.getUsers()
},
Mutation: {
createUser: (root, args) =>
db.createUser(args.name),
updateUser: (root, args) =>
db.updateUser(args.id, args.name),
deleteUser: (root, args) =>
db.deleteUser(args.id),
},
User: {
id: (root) => root.id,
name: (root) => root.name
}
}
Example: CRUD for User type

19. 3 Setup
"GraphQL engine" to orchestrate resolver invocations
Network layer based on "graphql-yoga" (network
configuration: port, endpoints, CORS … )
Middleware (analytics, logging, crash reporting … )

20. import { GraphQLServer } from 'graphql-yoga'
const typeDefs = `
type Query {
hello: String!
}
`
const resolvers = {
Query: {
hello: () => `Hello World`
}
}
const server = new GraphQLServer({
typeDefs,
resolvers
})
server.start(() => console.log(`Server is running on port 4000`))
RESOLVERS
SCHEMA
SETUP
…putting it all together

21. import { GraphQLServer } from 'graphql-yoga'
const typeDefs = `
type Query {
hello: String!
}
`
const resolvers = {
Query: {
hello: () => `Hello World`
}
}
const server = new GraphQLServer({
typeDefs,
resolvers
})
server.start(() => console.log(`Server is running on port 4000`))
RESOLVERS
SCHEMA
SETUP
…putting it all together

22. import { GraphQLServer } from 'graphql-yoga'
const typeDefs = `
type Query {
hello: String!
}
`
const resolvers = {
Query: {
hello: () => `Hello World`
}
}
const server = new GraphQLServer({
typeDefs,
resolvers
})
server.start(() => console.log(`Server is running on port 4000`))
RESOLVERS
SCHEMA
SETUP
…putting it all together

23. import { GraphQLServer } from 'graphql-yoga'
const typeDefs = `
type Query {
hello: String!
}
`
const resolvers = {
Query: {
hello: () => `Hello World`
}
}
const server = new GraphQLServer({
typeDefs,
resolvers
})
server.start(() => console.log(`Server is running on port 4000`))
RESOLVERS
SCHEMA
SETUP
…putting it all together

24. Learn more 💡
http://bit.ly/graphql-the-schema
GraphQL Server Basics - The Schema
https://www.howtographql.com/graphql-js/0-introduction/
GraphQL Server Tutorial
@nikolasburk

25. 🍿 Demo

26. Building GraphQL Servers
with Prisma
@nikolasburk

27. Typical 3-tier Architecture
CLIENT API SERVER DATABASE

28. Typical 3-tier Architecture
CLIENT API SERVER DATABASE
?

29. Data Access
ORMs are typically limited
Concerns: Security, Performance, Concurrency, …
Goal: Consistent & high-level API for data access

30. The Data Access Layer
CLIENT API SERVER DATABASE
DATA ACCESS
LAYER

31. Big companies typically roll
their own data access layers

32. Learn more 💡
http://bit.ly/twitter-dal
Twitter (Strato)
http://bit.ly/facebook-dal
Facebook (TAO)
http://bit.ly/airbnb-dal
Airbnb
@nikolasburk

33. Prisma is the Data (Access) Layer
CLIENT API SERVER DATABASEPRISMA

34. DB-agnostic data access layer (think ORM)
Prisma server & Prisma client
Declarative data modelling & migrations
Prisma

35. Architecture

36. Learn more 💡
https://www.prisma.io/docs/get-started
Prisma Quickstart
http://bit.ly/prisma-introduction
What is Prisma?
@nikolasburk

37. 🍿 Demo

38. Thank you 🙏
@nikolasburk@nikolasburk