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

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