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
初心者がほぼ知識ゼロで触ってみたGraphQLの感想
Search
benzookapi
October 14, 2018
Technology
0
290
初心者がほぼ知識ゼロで触ってみたGraphQLの感想
benzookapi
October 14, 2018
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
0
1.8k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
350
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
110
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
120
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.2k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
3.7k
Tech. Blog TIPS
benzookapi
0
230
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
230
WordPressとShopifyでECサイトを作ろう
benzookapi
0
980
Other Decks in Technology
See All in Technology
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
370
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
280
反実仮想機械学習とは何か
usaito
PRO
11
3.8k
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
340
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
生産性向上チームの紹介
cybozuinsideout
PRO
1
860
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
500
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
Featured
See All Featured
Practical Orchestrator
shlominoach
182
9.7k
GraphQLとの向き合い方2022年版
quramy
32
12k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Fireside Chat
paigeccino
21
2.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Building Adaptive Systems
keathley
31
1.9k
Transcript
ॳ৺ऀ͕΄΅ࣝθϩͰ৮ͬ ͯΈͨGraphQLͷײ API Meetup Tech Deep Dive #2: GraphQL
About me • Junichi Okamura (@benzookapi) • API Lover/Midnight Developer/MANGA
Creator/ TDD(Talk Driven Development)
ࠓ͓͍ͨ͜͠͠ͱ • GraphQLʹؔ৺Λ࣋ͬͨཧ༝ͱ৮ͬͯΈͨײ • ༰ઙ͍Ͱ͢ • ͔ͤͬ͘ͳͷͰಠࣗͷ໘നݟղʹ·ͱΊͯΈ· ͨ͠
GraphQLʹؔ৺Λ࣋ͬͨཧ༝ • REST APIʹ͖͖ͯͨ • ͦΖͦΖԿ͔৽͍༷͠ग़͖͍͍ͯͯΜ͡Ό ͳ͍ʁ • ࢀরܥPOST
ૣ৮ͬͯΈΔʁ • NO, ωοτͰ֓ཁ͚ͩ֬ೝͯ͠͠Β͘์ͬͯ ͓͍ͨ • ॳݟͱͯ͠ɺύϑΥʔϚϯεফඅϦιʔεʹ ͳ͚Εྑͦ͞͏
࣮ࡍ৮Δ͖͔͚ͬ • Կؾͳ͠ʹʮ࣍ճGraphQLऔΓ্͛ͯͩ͘͞ ͍ʂʯͱAPI MeetupͷํʹݴͬͨΒ͍ͭͷ·ʹ ͔ొஃ͢Δ͜ͱʹͳͬͯͨ • Α͠ٱʑʹTDD (Talk Driven
Developmentʣͩʂ
৮ͬͯΈͨʢσϞʣ • https://github.com/benzookapi/my-graphql- sample • https://github.com/benzookapi/my-react-sample • ͪ͜Βͷलҳ͗͢Δϒϩά͔Β΄΅ίϐʔͯ͠ಈ ͖·ͨ͠ɻhttps://www.m3tech.blog/entry/ graphql-apollo-react-express-nodejs
σϞͷߏ ͭͳ͙ଆʢΫϥΠΞϯτʣ React GraphQL modules http://localhost:3000 ఏڙ͢Δଆʢαʔόʔʣ Node+Express GraphQL modules
http://localhost:4000/graphiql
Γ͔ͨͬͨ͜ͱ • REST ͱGraphQL ͷ࣮ൺֱ • ͭͳ͙ଆʢΫϥΠΞϯτʣ͔ΒΈͯͲ͏͔ʁ • ఏڙ͢Δଆʢαʔόʔʣ͔ΒΈͯͲ͏͔ʁ •
೦ͳ͕ΒRESTଆͷ࣮͕࣌ؒͳͯؒ͘ʹ߹ Θͣɾɾɾ
ͭͳ͙ଆʢΫϥΠΞϯτʣ GraphQL vs REST ࣮ίετͷ͞ G ≒ R (ϥΠϒϥϦ͑มΘΒͳ͍ʁʣ ύϑΥʔϚϯε
G > R (GίʔϧΛݮΒͤΔ͚ͩૣ͍ʁʣ ίʔυͷগͳ͞ɾՄ ಡੑ G > R (GίʔϧΛݮΒͤΔ͚ͩઅɺ؆୯ʁʣ ϝϯςφϯεੑ G ≒ R (༷มߋͷίετಉ͡ʁʣ
ఏڙ͢Δଆʢαʔόʔʣ GraphQL vs REST ࣮ίετͷ͞ GraphQL < REST (G࿈݁ෛՙઃܭ͕େมʁʣ ύϑΥʔϚϯε
GraphQL ≒ < REST (ઃܭ࣍ୈ͕ͩRͷํָ͕ͦ͏ʣ ίʔυͷগͳ͞ɾՄ ಡੑ GraphQL ≒ < REST (ઃܭ࣍ୈ͕ͩGͷํ͕ࡶʹͳΓ͕ͪʁʣ ϝϯςφϯεੑ GraphQL > REST (GόʔδϣϯϨεͰεΩʔϚఏڙʣ
ֶͼํ • άάΔͱ৭ʑ͋Δ͚ͲຊՈαΠτΛॳΊ͔Βಡ Ήͷ͕Ұ൪Φεεϝ https://graphql.github.io/ • ҎԼ࣮༻త͔ͭ٬؍తͳઆ໌ͰΦεεϝ https://note.mu/konpyu/n/nc4fd122644a1
ͪͳΈʹੈͷAPIͰͲΕ͘Β͍ࢼ ͤΔͷ͔ɾɾʁ ͜Μ͚ͩϢʔβʔͱͯ͠ද໌͞Ε͍ͯΔ͕΄ ͱΜͲ͕෦͚ར༻ʢͩͱࢥ͏ʣ facebook API͢ΒݟͨΒͳ͍ʂ ʢfacebookݩʑύϑΥʔϚϯεվળͷͨΊ ʹGraphQLΛ։ൃɺOSSԽʣ
ײᶃ ॳϦΫΤετϨεϙϯεJSONͰશ෦ POSTͰγϯϓϧϥοΩʔͱࢥ͍͕ͬͯͨɺҙ֎ͱ ಠ༷͕ࣗଟֶ͘शίετߴͦ͏
ײᶄ σʔλ࡞ ʢRESTͰ͍͏POSTʣʹ͋·ΓԸܙ Λײ͡ͳ͍ɻΫΤϦͱΠϯλʔϑΣʔε͕ࣅ͍ͯΔ ͷͰٯʹࠞಉͦ͠͏
ײᶅ Authͷඪ४༷͕ͳ͍ʂʢGraphQLͱͯ͠ ֎ʁʣϏδωεϩδοΫͰΕͱ͔ɺJWTΛ͏ ͱ͔ఏҊతʹॻ͍ͯ͋Δ গͳ͍֎෦APIͱͯ͠ެ։͠ ͍ͯΔϓϥοτϑΥʔϜɺׂΓͬ ͯREST ͷOAuthΛྲྀ༻͍ͯ͠Δέʔε ͕ଟ͍ ʢࣗࢍʣ
ײᶆ APIΛͱͯ͠ఏڙ͢ΔଆʢϓϥοτϑΥʔϜʣ ɺΑͬΆͲ͏·͘ઃܭ͠ͳ͍ͱແବʹϦιʔε ৯ΘΕͨΓɺެ։ൣғ՝ۚମܥͷॲཧ͕େมʹ ͳΓͦ͏ʢRESTͰendpoint୯ҐͰग़͠Θ͚Ͱ͖ͯ ͨ͜ͱ͕શ෦ॲཧϕʔεʹͳΔʣ
ײᶇ ݁ߏReactΑΓͩͳɾɾʢग़ࣗతʹ͠ΐ͏͕ͳ͍ؾ ͢Δ͚ͲɺReactϋʔυϧߴ͍ਓଟ͍Α͏ͳʣ
ײᶈ • REST GETͩͱͲ͏ͯ͠දݱͮ͠Β͍ෳࡶͳΫ ΤϦʔΛAPIͰఏڙ͢Δʹظ௨Γཱͪͦ͏ • όʔδϣϯͳͲҙࣝͤͣ͞ήʔτΣΠݕࡧ Τϯδϯతʹ͑ΔAPIʹྑ͍͔ • ͋ΕɺͰͦΜͳΫΤϦʹಛԽ͓ͨ͠ೃછΈͷ
ͷ͋ͬͨΑͳɾɾɾ
SɾQɾLʂ
݁ ͻΐͬͱ͕ͯࣗ͠ཉ͍͠ͷͬͯ͜͏͍͏ͭͩͬͨɾɾʁ Request: SQL select id, name from employee where
id = 1; Response: JSON {id: 1, name: “me”} https://myapi.com/ (Single endpoint) Method: POST Headers: REST compatible (Auth) Status: REST compatible (Error handling)
͓͋ͱ͕ΑΖ͍͠Α͏Ͱ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ