How Canner.io Build GraphQL for CMS

Gave this speak at GraphQL Taiwan Meetup on 2018/6/20
How Canner.io Build GraphQL for CMS

Transcript

1. GraphQL for CMS @wwwy3y3 How Canner.io Build
2. Who am I • @wwwy3y3 • CTO & Co-founder @ canner.io • React, Typescript, NodeJS, Docker, Terraform. • JSDC, COSCUP speaker
3. ToC • Talk a little bit about CMS • Why we need GraphQL at Canner CMS • Why we develop apollo-link-firebase • How we develop GraphQL interface for canner.io
4. What is “CMS” ? • CMS stands for “Content Management System”
5. CMS & GraphQL?
6. How we see CMS
7. How we see CMS • The Rise of BaaS. • Parse, Firebase, Graphcool…
8. Adaptive CMS • a CMS adapt to different APIs.
9. Before GraphQL
10. Apollo
11. Apollo Client • Great support for React, Typescript • Great document • Create development experience (apollo-dev-tools) • Support Server-side Render • Opensource
12. Apollo Client - Cache • apollo-cache-inmemory is the default cache implementation for Apollo Client • Cache by ID (id, or _id) & __typename, if not exist, fallback to Query path (ROOT_QUERY.allPeople.0)
13. Apollo-link • A powerful way to compose actions around data handling with GraphQL • apollo-link-dedup: Deduplicate matching requests before making a request
14. Apollo-link • Operation: query, variables, operationName… • Forward: Specifies the next link.
15. Apollo-link-firebase • A simple way to query Firebase in graphQL without building a graphQL server • https://github.com/Canner/apollo-link-firebase
16. Apollo-link-firebase
17. Apollo-link-firebase • Query: All sorting and filtering are supported. • Mutation: deal with set, update, remove methods with graphQL mutation. • Realtime Subscription: Listen to your Firebase events using graphQL Subscription. • Data Join: Retrieve your data from different paths using one graphQL.
18. Apollo-link-firebase • Don’t make developers learn the GraphQL
19. Apollo-link-firebase • GraphQL directives
20. Apollo-link-firebase • Working with list of data: @array
21. Apollo-link-firebase
22. Apollo-link-firebase
23. How Canner use Apollo
24. Canner GraphQL Interface • A GraphQL interface for View Layer • https://github.com/Canner/canner-graphql-interface
25. Prisma
26. Prisma
27. Prisma
28. Prisma
29. Prisma
30. Prisma
31. Connector
32. Connector
33. Design Scalars • File, Image, DateTime, GeoPoint, Json
34. Connect to Prisma • Problem • More strict GraphQL • Type transformation • Query/Mutation transformation
35. Strict GraphQL
36. Transformation • Canner Support Customized Scalars: • Image, File, Geopoint… could be Embed or JSON type • Query: remove fields if transformed to JSON type • Mutation: update payload based on type
37. Transformation
38. Thank you