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.1k
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
610
spark serialization
wwwy3y3
0
120
classical ciphersin python
wwwy3y3
0
50
nodeJS 入門警戒 @wheelLab
wwwy3y3
2
190
Other Decks in Technology
See All in Technology
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
240
オーナーシップを持つ領域を明確にする
konifar
11
2.6k
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
430
PHPカンファレンス小田原2024
ysknsid25
3
660
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
140
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
9
2.1k
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
720
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
220
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.6k
Building Your Own Lightsaber
phodgson
98
5.7k
Unsuck your backbone
ammeep
662
57k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
76
41k
Infographics Made Easy
chrislema
237
18k
Into the Great Unknown - MozCon
thekraken
10
980
Git: the NoSQL Database
bkeepers
PRO
422
63k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
Code Reviewing Like a Champion
maltzj
513
39k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
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