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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
650
spark serialization
wwwy3y3
0
190
classical ciphersin python
wwwy3y3
0
62
nodeJS 入門警戒 @wheelLab
wwwy3y3
2
240
Other Decks in Technology
See All in Technology
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
coconala_engineer
2
730
AIエージェントを開発しよう!-AgentCore活用の勘所-
yukiogawa
0
180
Red Hat OpenStack Services on OpenShift
tamemiya
0
130
CDK対応したAWS DevOps Agentを試そう_20260201
masakiokuda
1
370
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
torumakabe
1
590
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
oracle4engineer
PRO
2
180
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
jonnojun
1
220
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
3
1k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
soudai
PRO
12
5.6k
Webhook best practices for rock solid and resilient deployments
glaforge
2
300
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
Faster Mobile Websites
deanohume
310
31k
The SEO identity crisis: Don't let AI make you average
varn
0
330
A Tale of Four Properties
chriscoyier
162
24k
Writing Fast Ruby
sferik
630
62k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
160
The Mindset for Success: Future Career Progression
greggifford
PRO
0
240
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
240
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
Paper Plane
katiecoart
PRO
0
46k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
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