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
1
1.9k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
400
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
110
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
150
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.2k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4k
Tech. Blog TIPS
benzookapi
0
250
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
240
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1k
Other Decks in Technology
See All in Technology
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
0
220
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
510
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
530
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
100
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
150
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
140
Databricksで構築する初めての複合AIシステム - ML15min
taka_aki
2
1.4k
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
170
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
140
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
250
君は隠しイベントを見つけれるか?
mujyun
0
210
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
How to train your dragon (web standard)
notwaldorf
88
5.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Building Applications with DynamoDB
mza
90
6.1k
Optimizing for Happiness
mojombo
376
69k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Testing 201, or: Great Expectations
jmmastey
38
7k
Building Your Own Lightsaber
phodgson
102
6k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
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)
͓͋ͱ͕ΑΖ͍͠Α͏Ͱ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ