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
340
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
110
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
120
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.1k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
3.6k
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
AWS アーキテクチャクイズ
yuu26
2
700
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
Getting started with controlling LEGO using Swift
hcrane
0
130
私のRSpecの書き方 / How I write RSpec
tmtms
4
830
統計的学習理論読み Chapter 2
kmatsui
1
230
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
250
GraphQLに入門してみた
chiroruxx
2
130
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.7k
チーム単位で保守性を高める:独自指標と向上にむけた実践
tarappo
0
300
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
業務で使えるかもしれない…!?GitHub Actions の Tips 集 / CI/CD Test Night #7
ponkio_o
PRO
24
7k
Featured
See All Featured
KATA
mclloyd
14
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
RailsConf 2023
tenderlove
0
510
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
How GitHub (no longer) Works
holman
301
140k
Adopting Sorbet at Scale
ufuk
66
8.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Teambox: Starting and Learning
jrom
126
8.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
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)
͓͋ͱ͕ΑΖ͍͠Α͏Ͱ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ