Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js + GraphQL + Ruby on Rails でつくる SPA / Bui...

meme
February 06, 2020

Vue.js + GraphQL + Ruby on Rails でつくる SPA / Build SPA with Vue.js + GraphQL + Ruby on Rails

meme

February 06, 2020
Tweet

Other Decks in Programming

Transcript

  1. About Me Job Hobby IUUQTNBDIJEBOJBUPLZP ϚνμχΞͱ͍͏αʔΫϧͰจֶϑϦϚʹখઆΛग़లͯ͠·͢  Official website Twitter

    LPVTVLFBCF GitHub HJGUFF3BJMTΤϯδχΞ 4'શൠ খઆಡΜͩΓॻ͍ͨΓͱ͔ !NFNFUJDT
  2. System Overview 7VFKT "QPMMPDMJFOU WVFBQPMMP (SBQI2- HSBQIRMSVCZ 3VCZPO3BJMT iTunes API

    IFSPLV 'JSFCBTFIPTUJOH Infrastructure API server Frontend ίί
  3. 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
  4. GraphQL Query & Mutation औಘ GET Query ొ࿥ POST Mutation

    ߋ৽ PUT/PATCH Mutation ࡟আ DELETE Mutation ɾ(SBQI2-Λར༻͍ͨ͠৔߹ɺͱΓ͋͑ͣ2VFSZͱ.VUBUJPO͚֮ͩ͑Ε͹0, σʔλऔಘܥͷΫΤϦ σʔλߋ৽ܥͷΫΤϦ 2VFSZ .VUBUJPO XFCTPDLFUΛ࢖ͬͨมߋ؂ࢹͷΫΤϦ 4VCTDSJQUJPO )551ϝιουͱͷରԠ
  5. GraphQL ͷ೰ΈͲ͜Ζ ɾ/ ໰୊ ɾΤϥʔϋϯυϦϯά ෳ਺ͷσʔλΛҰͭͷΫΤϦͰҰൃͰऔΕΔ͕ɺ/ ͕ൃੜ͠΍͍͢ ˠHSBQIRMCBUDI IUUQTHJUIVCDPN4IPQJGZHSBQIRMCBUDI Λར༻

    Ϩεϙϯεͷ εςʔλείʔυΛ200Ͱ౷Ұ͠ɺϨεϙϯεͷ errors ΩʔʹΤϥʔৄࡉ͕ೖΔ ɾ΍ͬͺΓ৘ใগͳ͍ ެࣜυΩϡϝϯτࣗମ͸ॆ࣮͍ͯ͠Δ͕ɺ3VCZͷ৘ใͷଟ͞ʹ׳ΕͯΔͱͪΐͬͱେมʜ →࣮૷ํ਑Λ݁ߏߟ͑ͳ͍ͱ͍͚ͳ͍(ຊΞϓϦͰ͸ΤϥʔϋϯυϦϯάΛαϘΓ·ͨ͠)
  6. Vue.js + GraphQL + Ruby on Rails ͰΞϓϦ࡞ͬͨॴײ ɾػೳͷ։ൃʹೖΔ·ͰͷηοτΞοϓ͕݁ߏ໘౗ ɾϑϩϯτΤϯυΤϯδχΞͱαʔόʔαΠυΤϯδχΞͷ

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

    ڑ཭ײ͕ԕ͍ϓϩδΣΫτͷ΄͏͕(SBQI2-ͷTDIFNB͕׆͖͖ͯͦ͏ ɾXFCQBDLͷઃఆ ɾBTTFUQJQFMJOFXFCQBDLFSΛണ͕͢ ɾ"QPMMP$MJFOU΍(SBQI2-TFSWFSͷ४උ ɾFUDʜ ָ͚͠Ε͹Α͠ (ݸਓ։ൃͳͷͰ)