Code-first GraphQL Server Development with Prisma
1 like880 views
This document discusses code-first and SDL-first approaches to building GraphQL schemas and servers. It defines the terminology and compares the two approaches. Code-first involves programmatically defining types and resolvers, while SDL-first uses a string-based schema definition language. Both have tradeoffs like inconsistencies or lack of tooling for SDL-first, and lack of documentation for code-first. Prisma is introduced as a tool that can generate a GraphQL schema from a database using either approach. The document concludes with a demonstration of building a GraphQL server and schema with Prisma and Nexus using a code-first approach.
![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](https://image.slidesharecdn.com/backupcode-firstgraphqlserverdevelopmentwithprisma-190906144456/85/Code-first-GraphQL-Server-Development-with-Prisma-15-320.jpg)
Code-first GraphQL Server Development with Prisma
- 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, ...
- 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