Save 37% off PRO during our Black Friday Sale! »

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

Bf3acef686273e03fa4fdf125fdad3e9?s=128

Aliaksei Kuncevič

February 20, 2020
Tweet

Transcript

  1. kuncevic.dev GraphQL Magic by ALIAKSEI KUNCEVIČ talk #25 v 1.0

    (02/20/2020) with Angular
  2. kuncevic.dev TOC ✅ Productivity ✅ Codegeneration ✅ Frontend + backend

    ✅ Integration
  3. kuncevic.dev ALIAKSEI KUNCEVIČ Angular Expert | Mentor | Consultant https://twitter.com/kuncevic

    https://github.com/kuncevic https://linkedin.com/in/kuncevic
  4. kuncevic.dev @kuncevic Angular Minsk (BY) Frontend Tech (AU) ORGANIZER Angular

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

    Since 2016
  6. kuncevic.dev @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte

    vs Ember vs Elm vs Angular frontendwatch.com
  7. kuncevic.dev Productivity

  8. kuncevic.dev There are different definitions of productivity

  9. kuncevic.dev Do more with less

  10. kuncevic.dev

  11. kuncevic.dev Building a web app?

  12. kuncevic.dev

  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
  14. kuncevic.dev start:build:now

  15. kuncevic.dev Let's fake the backend

  16. kuncevic.dev Fake API ✅ Auto generate data ✅ Mock the

    responses ✅ Runs locally ✅ Work offline
  17. kuncevic.dev GraphQL Faker

  18. kuncevic.dev GraphQL Faker

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

    and prototyping
  20. kuncevic.dev Faker Proxy

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

  22. kuncevic.dev Demo

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

  24. kuncevic.dev

  25. kuncevic.dev Let's build the frontend

  26. kuncevic.dev Angular (v9)

  27. kuncevic.dev

  28. kuncevic.dev Code generators

  29. kuncevic.dev

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

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

  32. kuncevic.dev But remember!

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

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

  35. kuncevic.dev The source of truth ✅

  36. kuncevic.dev It depends on your approach ✅ Database first ✅

    API first ✅ GraphQL first ✅ {{XYZ}} first
  37. kuncevic.dev

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

  39. kuncevic.dev graphql-code-generator

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

  41. kuncevic.dev How it works?

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

  43. kuncevic.dev npm scripts ✅ npm i graphql @graphql-codegen/cli -D ✅

    npm run generate -- --config introspect.yml ✅ npm run generate -- --config generate.yml
  44. kuncevic.dev Introspect config

  45. kuncevic.dev Generate config

  46. kuncevic.dev Demo

  47. kuncevic.dev Final Steps

  48. kuncevic.dev Apollo Client

  49. kuncevic.dev Apollo Client Platforms ✅ Angular ✅ React ✅ Ember

    ✅ Vue ✅ Meteor ✅ Web Components ✅ iOS/Android ✅ and more
  50. kuncevic.dev Custom GraphQL Module

  51. kuncevic.dev Finish ✅ GraphQL fake ✅ GraphQL code generation ✅

    Apollo client ✅ Angular integration
  52. kuncevic.dev

  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
  54. kuncevic.dev Th nk you! @kuncevic