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

Ce7d28518805b9c89eff30fd3ef013de?s=47 meme
February 06, 2020

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

Ce7d28518805b9c89eff30fd3ef013de?s=128

meme

February 06, 2020
Tweet

Transcript

  1. Vue.js + GraphQL + Ruby on Rails Ͱͭ͘Δ SPA Kosuke

    Abe/giftee*Inc. 2020/02/06
  2. About Me Job Hobby IUUQTNBDIJEBOJBUPLZP ϚνμχΞͱ͍͏αʔΫϧͰจֶϑϦϚʹখઆΛग़లͯ͠·͢  Official website Twitter

    LPVTVLFBCF GitHub HJGUFF3BJMTΤϯδχΞ 4'શൠ খઆಡΜͩΓॻ͍ͨΓͱ͔ !NFNFUJDT
  3. Intro-Don Generator ΞʔςΟετ໊Λೖྗ͢Δͱɺ ͦͷΞʔςΟετͷۂ౰ͯΫΠζΛੜ੒ͯ͘͠ΕΔ܅ Πϯτϩυϯ͕Ͱ͖Δͱ͸ݴͬͯͳ͍ https://musiq-quiz-generator.herokuapp.com/

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

  5. System Overview 7VFKT "QPMMPDMJFOU BQPMMPDMJFOU WVFBQPMMP (SBQI2- HSBQIRMSVCZ 3VCZPO3BJMT iTunes

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

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

    ߋ৽ PUT/PATCH Mutation ࡟আ DELETE Mutation ɾ(SBQI2-Λར༻͍ͨ͠৔߹ɺͱΓ͋͑ͣ2VFSZͱ.VUBUJPO͚֮ͩ͑Ε͹0, σʔλऔಘܥͷΫΤϦ σʔλߋ৽ܥͷΫΤϦ 2VFSZ .VUBUJPO XFCTPDLFUΛ࢖ͬͨมߋ؂ࢹͷΫΤϦ 4VCTDSJQUJPO )551ϝιουͱͷରԠ
  9. Query with graphql-ruby https://github.com/rmosolgo/graphql-ruby ΠϯτϩυϯΫΠζͷҰཡΛ औಘ͍ͨ͠ʂ

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

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

  12. Mutation with vue-apollo

  13. GraphQL ͷ೰ΈͲ͜Ζ ɾ/ ໰୊ ɾΤϥʔϋϯυϦϯά ෳ਺ͷσʔλΛҰͭͷΫΤϦͰҰൃͰऔΕΔ͕ɺ/ ͕ൃੜ͠΍͍͢ ˠHSBQIRMCBUDI IUUQTHJUIVCDPN4IPQJGZHSBQIRMCBUDI Λར༻

    Ϩεϙϯεͷ εςʔλείʔυΛ200Ͱ౷Ұ͠ɺϨεϙϯεͷ errors ΩʔʹΤϥʔৄࡉ͕ೖΔ ɾ΍ͬͺΓ৘ใগͳ͍ ެࣜυΩϡϝϯτࣗମ͸ॆ࣮͍ͯ͠Δ͕ɺ3VCZͷ৘ใͷଟ͞ʹ׳ΕͯΔͱͪΐͬͱେมʜ →࣮૷ํ਑Λ݁ߏߟ͑ͳ͍ͱ͍͚ͳ͍(ຊΞϓϦͰ͸ΤϥʔϋϯυϦϯάΛαϘΓ·ͨ͠)
  14. ࠓޙͰ͖ͨΒ΍Γ͍ͨ͜ͱ ɾ3FMBZ$VSTPS$POOFDUJPOTΛར༻ͨ͠ແݶεΫϩʔϧ ɾ(SBQI2-TVCTDSJQUJPOΛར༻ͯ͠ϦΞϧλΠϜʹಉ࣌Πϯτϩυϯ

  15. Vue.js + GraphQL + Ruby on Rails ͰΞϓϦ࡞ͬͨॴײ ɾػೳͷ։ൃʹೖΔ·ͰͷηοτΞοϓ͕݁ߏ໘౗ ɾϑϩϯτΤϯυΤϯδχΞͱαʔόʔαΠυΤϯδχΞͷ

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

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