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
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
OPENLOGI Company Profile for engineer
hr01
1
34k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
130
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.6k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Why Our Code Smells
bkeepers
PRO
336
57k
A better future with KSS
kneath
238
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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