ITT 2019 - Nikolas Burk - Boost your API Development with GraphQL & Prisma

Only three years after it was introduced by Facebook, GraphQL has replaced REST as the de-facto standard for API development.
A strongly typed API schema, improved performance and a great open-source ecosystem are just some of the benefits developers get with GraphQL.
This talk introduces the current state of GraphQL as well as best practices for GraphQL server development using Prisma and various tools from the GraphQL ecosystem.

Transcript

1. Boost your API Development with GraphQL and Prisma @nikolasburk
2. Nikolas Burk Based in Berlin Developer at @prisma @nikolasburk @nikolasburk
3. GraphQL Introduction Understanding GraphQL Servers Building GraphQL Servers with Prisma Agenda @nikolasburk 1 2 3
4. GraphQL Introduction @nikolasburk 1
5. • A query language for APIs (alternative to REST) • 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 • Client decides what data is returned
10. Architectures / Use cases of GraphQL GraphQL-Native Backend GraphQL as API Gateway
11. GraphQL for frontend developers • Declarative data fetching • Colocate queries with views (e.g. React components) • Powerful GraphQL clients (caching, realtime, offline, …)
12. GraphQL for backend developers • GraphQL schema defines API operations and data structures • Implementation using resolver functions • Datasource-agnostic: GraphQL for any database or legacy API
13. GraphQL for backend developers GraphQL for frontend developers
14. Demo
15. Understanding GraphQL Servers @nikolasburk 2
16. API definition: The GraphQL schema Implementation: Resolver functions Server: Network (HTTP), Middleware, … 3 parts of a GraphQL server 1 2 3
17. Schema-first Code-first
18. “Hello World” 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 World” 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)
20. “Hello World” 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` model: 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` model: 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` model: 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() }, list: true, resolve: (_, args) => db.users.create({name: args.name}) }) }, }) index.ts `User` model: 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` model: Mutation
26. Demo
27. Building GraphQL Servers with Prisma @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. What is Prisma? Database Access (ORM) Type-safe database access with the auto-generated Prisma client Migrations Declarative data modeling and schema migrations Admin UI Visual data management with Prisma Admin Prisma replaces traditional ORMs and simplifies database workflows Query Analytics Quickly identify slow data access patterns
30. Prisma is the database-interface for application developers
31. Prisma + GraphQL = GraphQL Yoga • GraphQL-native backend framework for Node.js • Modern alternative to Ruby on Rails, Spring, Django, … • Features: ✓ Full type-safety (supporting JavaScript & TypeScript) ✓ Deep database integration via Prisma ✓ Powerful CLI (incl. scaffolding, hot-reload dev server, build, ...) ✓ Compatible with GraphQL ecosystem
32. Demo
33. Thank you @nikolasburk @nikolasburk CFP Closed
34. Thank you @nikolasburk @nikolasburk