Vue.js + GraphQL + Ruby on Rails Ͱͭ͘Δ SPA Kosuke Abe/giftee*Inc. 2020/02/06

About Me Job Hobby IUUQTNBDIJEBOJBUPLZP ϚνμχΞͱ͍͏αʔΫϧͰจֶϑϦϚʹখઆΛग़లͯ͠·͢ Official website Twitter LPVTVLFBCF GitHub HJGUFF3BJMTΤϯδχΞ 4'શൠ খઆಡΜͩΓॻ͍ͨΓͱ͔ !NFNFUJDT

Intro-Don Generator ΞʔςΟετ໊Λೖྗ͢Δͱɺ ͦͷΞʔςΟετͷۂ౰ͯΫΠζΛੜ੒ͯ͘͠ΕΔ܅ Πϯτϩυϯ͕Ͱ͖Δͱ͸ݴͬͯͳ͍ https://musiq-quiz-generator.herokuapp.com/

࿩͢͜ͱ ࿩͞ͳ͍͜ͱ ɾओʹ(SBQI2-ʹ͍ͭͯ ɾ࡞ͬͨΞϓϦͷࡉ͔͍͜ͱʹ͍ͭͯ ݸਓ։ൃOJHIUͱ͸ Intro-Don Generator ɾ7VF3BJMTͰͲΜͳ࣮૷Λͯ͠Δ͔

System Overview 7VFKT "QPMMPDMJFOU BQPMMPDMJFOUWVFBQPMMP (SBQI2- HSBQIRMSVCZ 3VCZPO3BJMT iTunes API IFSPLV 'JSFCBTFIPTUJOH Infrastructure API server Frontend

System Overview 7VFKT "QPMMPDMJFOU WVFBQPMMP (SBQI2- HSBQIRMSVCZ 3VCZPO3BJMT iTunes API IFSPLV 'JSFCBTFIPTUJOH Infrastructure API server Frontend ίί

GraphQL? RESTful API URL ͱ HTTP method ͷ ૊Έ߹ΘͤͰϦιʔεΛදݱ ਆΤϯυϙΠϯτʢex: “POST /graphql”͚ͩ౳ʣ ͱ body ͷ εΩʔϚఆٛ GraphQL API (&5BQJWRVJ[[FTJE ΫΠζৄࡉऔಘ HSBQIRM 1045BQJWRVJ[[FT ΫΠζ৽ن࡞੒ HSBQIRM query { quiz { name } } mutation createQuiz($name: String!){ createQuiz(input: { name: $name }) { quiz { name } } } ɾ'BDFCPPL͕։ൃ͍ͯ͠Δ8FC"1*ͷͨΊͷن֨ ɾ3&45ͱൺֱ͞ΕΔ͜ͱ͕ଟ͍͕ɺ3&45Λ୅ସ͢Δ΋ͷͰ͸ͳ͍Β͍͠ Example Example

GraphQL Query & Mutation औಘ GET Query ొ࿥ POST Mutation ߋ৽ PUT/PATCH Mutation ࡟আ DELETE Mutation ɾ(SBQI2-Λར༻͍ͨ͠৔߹ɺͱΓ͋͑ͣ2VFSZͱ.VUBUJPO͚֮ͩ͑Ε͹0, σʔλऔಘܥͷΫΤϦ σʔλߋ৽ܥͷΫΤϦ 2VFSZ .VUBUJPO XFCTPDLFUΛ࢖ͬͨมߋ؂ࢹͷΫΤϦ 4VCTDSJQUJPO )551ϝιουͱͷରԠ

Query with graphql-ruby https://github.com/rmosolgo/graphql-ruby ΠϯτϩυϯΫΠζͷҰཡΛ औಘ͍ͨ͠ʂ

Query with vue-apollo https://github.com/vuejs/vue-apollo

Mutation with graphql-ruby ΠϯτϩυϯΫΠζΛ ৽ن࡞੒͍ͨ͠ʂ

Mutation with vue-apollo

GraphQL ͷ೰ΈͲ͜Ζ ɾ/໰୊ ɾΤϥʔϋϯυϦϯά ෳ਺ͷσʔλΛҰͭͷΫΤϦͰҰൃͰऔΕΔ͕ɺ/͕ൃੜ͠΍͍͢ ˠHSBQIRMCBUDI IUUQTHJUIVCDPN4IPQJGZHSBQIRMCBUDI Λར༻ Ϩεϙϯεͷ εςʔλείʔυΛ200Ͱ౷Ұ͠ɺϨεϙϯεͷ errors ΩʔʹΤϥʔৄࡉ͕ೖΔ ɾ΍ͬͺΓ৘ใগͳ͍ ެࣜυΩϡϝϯτࣗମ͸ॆ࣮͍ͯ͠Δ͕ɺ3VCZͷ৘ใͷଟ͞ʹ׳ΕͯΔͱͪΐͬͱେมʜ →࣮૷ํ਑Λ݁ߏߟ͑ͳ͍ͱ͍͚ͳ͍(ຊΞϓϦͰ͸ΤϥʔϋϯυϦϯάΛαϘΓ·ͨ͠)

ࠓޙͰ͖ͨΒ΍Γ͍ͨ͜ͱ ɾ3FMBZ$VSTPS$POOFDUJPOTΛར༻ͨ͠ແݶεΫϩʔϧ ɾ(SBQI2-TVCTDSJQUJPOΛར༻ͯ͠ϦΞϧλΠϜʹಉ࣌Πϯτϩυϯ

Vue.js + GraphQL + Ruby on Rails ͰΞϓϦ࡞ͬͨॴײ ɾػೳͷ։ൃʹೖΔ·ͰͷηοτΞοϓ͕݁ߏ໘౗ ɾϑϩϯτΤϯυΤϯδχΞͱαʔόʔαΠυΤϯδχΞͷ ڑ཭ײ͕ԕ͍ϓϩδΣΫτͷ΄͏͕(SBQI2-ͷTDIFNB͕׆͖͖ͯͦ͏ ɾXFCQBDLͷઃఆ ɾBTTFUQJQFMJOFXFCQBDLFSΛണ͕͢ ɾ"QPMMP$MJFOU΍(SBQI2-TFSWFSͷ४උ ɾFUDʜ

Vue.js + GraphQL + Ruby on Rails ͷॴײ ػೳͷ։ൃʹೖΔ·ͰͷηοτΞοϓ͕݁ߏ໘౗ ϑϩϯτΤϯυΤϯδχΞͱαʔόʔαΠυΤϯδχΞͷ ڑ཭ײ͕ԕ͍ϓϩδΣΫτͷ΄͏͕(SBQI2-ͷTDIFNB͕׆͖͖ͯͦ͏ ɾXFCQBDLͷઃఆ ɾBTTFUQJQFMJOFXFCQBDLFSΛണ͕͢ ɾ"QPMMP$MJFOU΍(SBQI2-TFSWFSͷ४උ ɾFUDʜ ָ͚͠Ε͹Α͠ (ݸਓ։ൃͳͷͰ)

Thank you!