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
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1k
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.3k
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Become a Pro
speakerdeck
PRO
29
5.4k
The Cult of Friendly URLs
andyhume
79
6.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Agile that works and the tools we love
rasmusluckow
329
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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