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
300
初心者がほぼ知識ゼロで触ってみた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
410
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
250
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1k
Other Decks in Technology
See All in Technology
The Role of Developer Relations in AI Product Success.
giftojabu1
0
130
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
480
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
590
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
310
信頼性に挑む中で拡張できる・得られる1人のスキルセットとは?
ken5scal
2
530
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
190
AIチャットボット開発への生成AI活用
ryomrt
0
170
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
520
39k
A designer walks into a library…
pauljervisheath
204
24k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Building Applications with DynamoDB
mza
90
6.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
The Language of Interfaces
destraynor
154
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
Building Adaptive Systems
keathley
38
2.3k
Embracing the Ebb and Flow
colly
84
4.5k
Done Done
chrislema
181
16k
The Cult of Friendly URLs
andyhume
78
6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
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)
͓͋ͱ͕ΑΖ͍͠Α͏Ͱ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ