Next-generation API Development with GraphQL and Prisma

1. Next-generation API Development
with GraphQL and Prisma
@nikolasburk

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

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

4. Introduction to GraphQL
@nikolasburk
1

5. ● A query language for APIs (alternative to REST, SOAP, OData, ...)
● Language-agnostic on backend and frontend
● Developed by Facebook, now led by GraphQL Foundation
What is GraphQL?

6. GraphQL has become the
new API standard

7. Benefits of GraphQL
✓ "Query exactly the data you need" (in a single request)
✓ Declarative & strongly typed schema
✓ Schema used as cross-team communication tool
✓ Decouples teams
✓ Incrementally adoptable
✓ Rich ecosystem & very active community

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

9. REST
● Multiple endpoints
● Server decides what data is returned
GraphQL
● Single endpoint (+ schema)
● Client decides what data is returned

10. Architectures / Use cases of GraphQL
GraphQL-Native Backend GraphQL as API Gateway

11. 🍿 Demo

12. Understanding
GraphQL Servers
@nikolasburk
2

13. API definition: The GraphQL schema
Implementation: Resolver functions
Server: Network (HTTP), Middleware, …
3 parts of a GraphQL server
1
2
3

14. SDL-first Code-first
(Schema-first)

15. “Hello World” 👋
const Query = queryType({
definition(t) {
t.string('hello', {
resolve: () => {
return `Hello World`
}
})
},
})
const schema = makeSchema({ types: [Query] })
const server = new GraphQLServer({ schema })
server.start(() => console.log(`Running on http://localhost:4000`))
index.ts

16. “Hello World” 👋
const Query = queryType({
definition(t) {
t.string('hello', {
resolve: () => {
return `Hello World`
}
})
},
})
const schema = makeSchema({ types: [Query] })
const server = new GraphQLServer({ schema })
server.start(() => console.log(`Running on http://localhost:4000`))
index.ts
type Query {
hello: String!
}
schema.graphql (generated)

17. type Query {
hello: String!
}
“Hello World” 👋
const Query = queryType({
definition(t) {
t.string('hello', {
resolve: () => {
return `Hello World`
}
})
},
})
const schema = makeSchema({ types: [Query] })
const server = new GraphQLServer({ schema })
server.start(() => console.log(`Running on http://localhost:4000`))
index.ts schema.graphql (generated)

18. “Hello You!” 👋
const Query = queryType({
definition(t) {
t.string('hello', {
args: { name: stringArg() },
resolve: (_, args) => {
return `Hello ${args.name}`
}
})
},
})
const schema = makeSchema({ types: [Query] })
const server = new GraphQLServer({ schema })
server.start(() => console.log(`Running on http://localhost:4000`))
index.ts

19. “Hello You!” 👋
const Query = queryType({
definition(t) {
t.string('hello', {
args: { name: stringArg() },
resolve: (_, args) => {
return `Hello ${args.name}`
}
})
},
})
const schema = makeSchema({ types: [Query] })
const server = new GraphQLServer({ schema })
server.start(() => console.log(`Running on http://localhost:4000`))
index.ts

20. “Hello You!” 👋
const Query = queryType({
definition(t) {
t.string('hello', {
args: { name: stringArg() },
resolve: (_, args) => {
return `Hello ${args.name}`
}
})
},
})
const schema = makeSchema({ types: [Query] })
const server = new GraphQLServer({ schema })
server.start(() => console.log(`Running on http://localhost:4000`))
type Query {
hello(name: String!): String!
}
index.ts schema.graphql (generated)

21. `User` type: Query
const User = objectType({
name: 'User',
definition(t) {
t.id('id')
t.string('name')
}
})
const Query = queryType({
definition(t) {
t.field('users', {
type: 'User',
list: true,
resolve: () => db.users.findAll()
})
},
})
index.ts

22. const User = objectType({
name: 'User',
definition(t) {
t.id('id')
t.string('name')
}
})
const Query = queryType({
definition(t) {
t.field('users', {
type: 'User',
list: true,
resolve: () => db.users.findAll()
})
},
})
index.ts
`User` type: Query

23. const User = objectType({
name: 'User',
definition(t) {
t.id('id')
t.string('name')
}
})
const Query = queryType({
definition(t) {
t.field('users', {
type: 'User',
list: true,
resolve: () => db.users.findAll()
})
},
})
index.ts
type User {
id: ID!
name: String!
}
type Query {
users: [User!]!
}
schema.graphql (generated)
`User` type: Query

24. const User = objectType({
name: 'User',
definition(t) {
t.id('id')
t.string('name')
}
})
const Mutation = mutationType({
definition(t) {
t.field('createUser', {
type: 'User',
args: { name: stringArg() },
resolve: (_, args) => db.users.create({name: args.name})
})
},
})
index.ts
`User` type: Mutation

25. const User = objectType({
name: 'User',
definition(t) {
t.id('id')
t.string('name')
}
})
const Mutation = mutationType({
definition(t) {
t.field('createUser', {
type: 'User',
args: { name: stringArg() },
list: true,
resolve: (_, args) => db.users.create({name: args.name})
})
},
})
index.ts
type User {
id: ID!
name: String!
}
type Mutation {
createUser(name: String): User!
}
schema.graphql (generated)
`User` type: Mutation

26. 🍿 Demo

27. Building GraphQL Servers
with Prisma and Nexus
@nikolasburk
3

28. GraphQL resolvers are hard
✗ A lot of CRUD boilerplate
✗ Deeply nested queries
✗ Performant database access & N+1 problem
✗ Database transactions
✗ Difficult to achieve full type-safety
✗ Implementing realtime operations

29. Prisma helps implementing
your GraphQL resolvers
against a database ⚡

30. What is the Prisma Framework?
Database Access
Type-safe database access with
the auto-generated DB client
Migrations
Declarative data modeling and
schema migrations
Admin UI
Visual data management with
Prisma Studio
Prisma replaces traditional ORMs and makes working with databases easy
Query Analytics
Quickly identify slow data
access patterns

31. Prisma modernized database workflows

32. One framework for all your DB workflows

33. Prisma + GraphQL = ❤
✓ End-to-end type safety from database to frontend
✓ Saves tons of boilerplate
✓ Fully compatible with the GraphQL ecosystem
🔭 Future: A modern “Ruby-on-Rails” built on GraphQL & Prisma

34. 🍿 Demo

35. Learn more on GitHub 👀
https://github.com/prisma/prisma2

36. Thank you 🙏
@nikolasburk@nikolasburk