Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

990b89ca5f918a94ef6523d399eda9a4?s=128

Istanbul Tech Talks

April 02, 2019
Tweet

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