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

GraphQL Magic with Angular

GraphQL Magic with Angular

This talk is about how to stay performant using GraphQL tools, how to fake GraphQL server if needed using IDL and how to auto-generate all the code you need to interact with existing GraphQL server.

ref: https://www.meetup.com/GraphQL-Sydney/events/267681845/ @ graphqlsydney 20 Dec 2020

Aliaksei Kuncevič

February 20, 2020
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Programming

Transcript

  1. kuncevic.dev
    GraphQL Magic
    by ALIAKSEI KUNCEVIČ
    talk #25
    v 1.0 (02/20/2020)
    with Angular

    View Slide

  2. kuncevic.dev
    TOC
    ✅ Productivity
    ✅ Codegeneration
    ✅ Frontend + backend
    ✅ Integration

    View Slide

  3. kuncevic.dev
    ALIAKSEI KUNCEVIČ
    Angular Expert | Mentor | Consultant
    https://twitter.com/kuncevic
    https://github.com/kuncevic
    https://linkedin.com/in/kuncevic

    View Slide

  4. kuncevic.dev
    @kuncevic
    Angular Minsk (BY)
    Frontend Tech (AU)
    ORGANIZER
    Angular Workshop

    View Slide

  5. kuncevic.dev
    @kuncevic SPEAKER
    20+ Angular-related talks
    first talk at #graphqlsydney
    Since 2016

    View Slide

  6. kuncevic.dev
    @kuncevic CREATOR

    Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular
    frontendwatch.com

    View Slide

  7. kuncevic.dev
    Productivity

    View Slide

  8. kuncevic.dev
    There are different
    definitions of productivity

    View Slide

  9. kuncevic.dev
    Do more with less

    View Slide

  10. kuncevic.dev

    View Slide

  11. kuncevic.dev
    Building a web app?

    View Slide

  12. kuncevic.dev

    View Slide

  13. kuncevic.dev
    I don't know the backend requirements yet
    but I know how the frontend looks like and
    I want start building today

    View Slide

  14. kuncevic.dev
    start:build:now

    View Slide

  15. kuncevic.dev
    Let's fake the backend

    View Slide

  16. kuncevic.dev
    Fake API
    ✅ Auto generate data
    ✅ Mock the responses
    ✅ Runs locally
    ✅ Work offline

    View Slide

  17. kuncevic.dev
    GraphQL Faker

    View Slide

  18. kuncevic.dev
    GraphQL Faker

    View Slide

  19. kuncevic.dev
    This approach works well in
    case of greenfield projects
    and prototyping

    View Slide

  20. kuncevic.dev
    Faker Proxy

    View Slide

  21. kuncevic.dev
    This approach works well with
    existing GraphQL backends

    View Slide

  22. kuncevic.dev
    Demo

    View Slide

  23. kuncevic.dev
    You've got the GraphQL API

    View Slide

  24. kuncevic.dev

    View Slide

  25. kuncevic.dev
    Let's build the frontend

    View Slide

  26. kuncevic.dev
    Angular (v9)

    View Slide

  27. kuncevic.dev

    View Slide

  28. kuncevic.dev
    Code generators

    View Slide

  29. kuncevic.dev

    View Slide

  30. kuncevic.dev
    Definition/Schema
    ✅ SQL => DTO
    ✅ JSON => DTO

    View Slide

  31. kuncevic.dev
    Convert/Transform
    Format A => Format B

    View Slide

  32. kuncevic.dev
    But remember!

    View Slide

  33. kuncevic.dev
    Do not ever modify
    auto-generated code!

    View Slide

  34. kuncevic.dev
    What was
    auto-generated in
    Vegas stays in
    Vegas

    View Slide

  35. kuncevic.dev
    The source of truth ✅

    View Slide

  36. kuncevic.dev
    It depends on your approach
    ✅ Database first
    ✅ API first
    ✅ GraphQL first
    ✅ {{XYZ}} first

    View Slide

  37. kuncevic.dev

    View Slide

  38. kuncevic.dev
    GraphQL schema as the
    source of truth

    View Slide

  39. kuncevic.dev
    graphql-code-generator

    View Slide

  40. kuncevic.dev
    Generates code for any
    technology from GraphQL

    View Slide

  41. kuncevic.dev
    How it works?

    View Slide

  42. kuncevic.dev
    The process
    ✅ Fetch GraphQL schema
    ✅ Generate code

    View Slide

  43. kuncevic.dev
    npm scripts
    ✅ npm i graphql @graphql-codegen/cli -D
    ✅ npm run generate -- --config introspect.yml
    ✅ npm run generate -- --config generate.yml

    View Slide

  44. kuncevic.dev
    Introspect config

    View Slide

  45. kuncevic.dev
    Generate config

    View Slide

  46. kuncevic.dev
    Demo

    View Slide

  47. kuncevic.dev
    Final Steps

    View Slide

  48. kuncevic.dev
    Apollo Client

    View Slide

  49. kuncevic.dev
    Apollo Client Platforms
    ✅ Angular
    ✅ React
    ✅ Ember
    ✅ Vue
    ✅ Meteor
    ✅ Web Components
    ✅ iOS/Android
    ✅ and more

    View Slide

  50. kuncevic.dev
    Custom GraphQL Module

    View Slide

  51. kuncevic.dev
    Finish
    ✅ GraphQL fake
    ✅ GraphQL code generation
    ✅ Apollo client
    ✅ Angular integration

    View Slide

  52. kuncevic.dev

    View Slide

  53. kuncevic.dev
    Links Summary ✅
    GraphQL Fake https://github.com/APIs-guru/graphql-faker
    GraphQL Code Generator https://github.com/dotansimha/graphql-code-generator
    Apollo Client https://www.apollographql.com/docs/angular
    Angular https://angular.io
    Frontend Watch https://frontendwatch.com

    View Slide

  54. kuncevic.dev
    Th nk you!
    @kuncevic

    View Slide