Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How Canner.io Build GraphQL for CMS
Search
wwwy3y3
June 21, 2018
Technology
0
1.2k
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
wwwy3y3
June 21, 2018
Tweet
Share
More Decks by wwwy3y3
See All by wwwy3y3
React server-side render nightmare gone
wwwy3y3
0
640
spark serialization
wwwy3y3
0
170
classical ciphersin python
wwwy3y3
0
60
nodeJS 入門警戒 @wheelLab
wwwy3y3
2
230
Other Decks in Technology
See All in Technology
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
160
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
280
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
200
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
100
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
How to Ace a Technical Interview
jacobian
278
23k
Unsuck your backbone
ammeep
671
58k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Building Adaptive Systems
keathley
43
2.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Faster Mobile Websites
deanohume
307
31k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Optimizing for Happiness
mojombo
379
70k
Transcript
GraphQL for CMS @wwwy3y3 How Canner.io Build
Who am I • @wwwy3y3 • CTO & Co-founder @
canner.io • React, Typescript, NodeJS, Docker, Terraform. • JSDC, COSCUP speaker
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
What is “CMS” ? • CMS stands for “Content Management
System”
CMS & GraphQL?
How we see CMS
How we see CMS • The Rise of BaaS. •
Parse, Firebase, Graphcool…
Adaptive CMS • a CMS adapt to different APIs.
Before GraphQL
Apollo
Apollo Client • Great support for React, Typescript • Great
document • Create development experience (apollo-dev-tools) • Support Server-side Render • Opensource
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)
Apollo-link • A powerful way to compose actions around data
handling with GraphQL • apollo-link-dedup: Deduplicate matching requests before making a request
Apollo-link • Operation: query, variables, operationName… • Forward: Specifies the
next link.
Apollo-link-firebase • A simple way to query Firebase in graphQL
without building a graphQL server • https://github.com/Canner/apollo-link-firebase
Apollo-link-firebase
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.
Apollo-link-firebase • Don’t make developers learn the GraphQL
Apollo-link-firebase • GraphQL directives
Apollo-link-firebase • Working with list of data: @array
Apollo-link-firebase
Apollo-link-firebase
How Canner use Apollo
Canner GraphQL Interface • A GraphQL interface for View Layer
• https://github.com/Canner/canner-graphql-interface
Prisma
Prisma
Prisma
Prisma
Prisma
Prisma
Connector
Connector
Design Scalars • File, Image, DateTime, GeoPoint, Json
Connect to Prisma • Problem • More strict GraphQL •
Type transformation • Query/Mutation transformation
Strict GraphQL
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
Transformation
Thank you