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