Code-first GraphQL Server Development with Prisma (GraphQL Day Bodensee 2019)

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

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

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

31. 🍿 Demo

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

34. prisma.io/blog
READ MORE ON

35. Thank you 🙏
@nikolasburk@nikolasburk