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.

Istanbul Tech Talks

April 02, 2019
Tweet

More Decks by Istanbul Tech Talks

Other Decks in Technology

Transcript

  1. Boost your API Development with
    GraphQL and Prisma
    @nikolasburk

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. GraphQL Introduction
    @nikolasburk
    1

    View full-size slide

  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?

    View full-size slide

  6. GraphQL has become the
    new API standard

    View full-size slide

  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

    View full-size slide

  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" },
    ]
    }
    }
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. GraphQL for
    frontend developers
    ● Declarative data fetching
    ● Colocate queries with views
    (e.g. React components)
    ● Powerful GraphQL clients
    (caching, realtime, offline, …)

    View full-size slide

  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

    View full-size slide

  13. GraphQL for
    backend developers
    GraphQL for
    frontend developers

    View full-size slide

  14. Understanding
    GraphQL Servers
    @nikolasburk
    2

    View full-size slide

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

    View full-size slide

  16. Schema-first Code-first

    View full-size slide

  17. “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

    View full-size slide

  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`))
    type Query {
    hello(name: String!): String!
    }
    index.ts schema.graphql (generated)

    View full-size slide

  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)

    View full-size slide

  20. `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

    View full-size slide

  21. 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

    View full-size slide

  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
    type User {
    id: ID!
    name: String!
    }
    type Query {
    users: [User!]!
    }
    schema.graphql (generated)
    `User` model: Query

    View full-size slide

  23. 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

    View full-size slide

  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
    type User {
    id: ID!
    name: String!
    }
    type Mutation {
    createUser(name: String): User!
    }
    schema.graphql (generated)
    `User` model: Mutation

    View full-size slide

  25. Building GraphQL Servers
    with Prisma
    @nikolasburk
    3

    View full-size slide

  26. 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

    View full-size slide

  27. 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

    View full-size slide

  28. Prisma is the database-interface for
    application developers

    View full-size slide

  29. 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

    View full-size slide

  30. Thank you
    @nikolasburk
    @nikolasburk
    CFP Closed

    View full-size slide

  31. Thank you
    @nikolasburk
    @nikolasburk

    View full-size slide