個人ブログサイトを構築して学ぶGraphQL NestJSとNext.js使うよ！ / graphql nestjs nextjs bootcamp

ݸਓϒϩάΛ࡞ֶͬͯͿ(SBQI2- /FTU+4/FYUKT Ϋϥεϝιουגࣜձࣾ࿨ా༞հ

ࠓ೔ GraphQLͷ࿩

ܦҢ "84"QQ4ZODͰ(SBQI2-όοΫΤϯυΛߏங͠ ͨͷ͕͖͔͚ͬ https://aws.amazon.com/jp/appsync/

ܦҢ "84"QQ4ZODͰ(SBQI2-όοΫΤϯυΛߏங͠ ͨͷ͕͖͔͚ͬ

࢖ͬͨײ૝ 😊͍Ζ͍Ζͳιʔε͔Βσʔλͱͬͯ͜Εͯศར 🤔୭͕ͳʹΛ΍͍ͬͯΔΜͩʁͲ͜·Ͱ͕(SBQI2-ʁ ࣗ෼ͷϒϩάαΠτΛGraphQLͰ࣮૷ͯ͠Έͨ

(SBQI2-ͱ͍͑͹ʜ 2VFSZͰσʔλͱΕ·͢ʂ .VUBUJPOͰσʔλߋ৽Ͱ͖·͢ʂ 4VCTDSJQUJPOͰϦΞϧλΠϜʂ 'BDFCPPL͕։ൃͨ͠΍ͭʂ

·ͨ͸

(SBQI2-ͱ͍͑͹ʜ "84"QQ4ZODʂ "QPMMPʂ )BTVSBʂ

͜ΕΒͷ”ؒ”ΛຒΊ͍ͨ

ຊൃදͷ໨త (SBQI2-Λ࣮ફ౤ೖ͢ΔΠϝʔδΛ΋ͬͯ΋Β͏ ͻ͍ͯ͸ɿ ΞϓϦέʔγϣϯ։ൃऀΛ૿΍͢ ͦͷͨΊʹɿ ݸਓϒϩάαΠτΛΠϯΫϦϝϯλϧʹߏஙͯ͠ɺ۩ମతͳ (SBQI2-ͷ࢖͍ํΛΈͳ͕Β࢓༷Λ೺Ѳ͢Δ όοΫΤϯυɺϑϩϯτΤϯυ྆ํߏங͢Δ

🙏΍Βͳ͍͜ͱ (SBQI2-4VCTDSJQUJPOTͷ࿩͸͋Γ·ͤΜ (SBQI2-%JSFDUJWFTͷ࿩͸͋Γ·ͤΜ ϩάΠϯɾηογϣϯ؅ཧͷ࿩͸͋Γ·ͤΜ ςετͷ࿩͸͋Γ·ͤΜ

΍Δ͜ͱ ݸਓ༻ͷϒϩάαΠτΛͭ͘Δ http://blog.parity-box.com/

εϥΠυ͸ޙͰೖख͢Δ͜ͱ͕ग़དྷ·͢ͷͰ ൃදதͷ಺༰ΛϝϞ͢Δඞཁ͸͋Γ·ͤΜɻ ࣸਅࡱӨΛ͢Δ৔߹͸ ϑϥογϡɾγϟολʔԻ͕ग़ͳ͍Α͏ʹ͝഑ྀ͍ͩ͘͞ Attention

ࣗݾ঺հ ࿨ా༞հ Ϋϥεϝιουגࣜձࣾ ৽نࣄۀ౷ׅ෦;FOOνʔϜ XBEEZ@V "84 4DBMBʹΑΔ8FC"1*
"84αʔόʔϨε 3FDU41" (PPHMF$MPVE 3BJMT /FYUKTʢࠓ͜͜ʣ

;FOOͱ͸ *5ΤϯδχΞͷͨΊͷ৘ใڞ༗ίϛϡχςΟ

;FOOͱ͸ https://www.youtube.com/watch?v=DTpGfpLybr0 ;FOOݸਓ։ൃͷݶքʹ௅Μͩ࿩EFWTVNJ ࣍ͷٕज़ϒϩάΛૂ͏ʮ;FOOʯ͕Ϋϥεϝιου΁ɹվ ΊͯΤϯδχΞͷ৘ใൃ৴Λ໰͏ https://ascii.jp/elem/000/004/042/4042376/

࣭໰΍ؾʹͳΔ͜ͱ͕͋ͬͨΒεΫϥοϓ΁ (PPHMFΞΧ΢ϯτ͕͋Ε͹ແྉͰར༻Ͱ͖·͢

׬શཧղฤ (SBQI2-ͱ͸ (JU)VC"1*Ͱମݧ͢Δ ϛχϚϜόοΫΤϯυ ϛχϚϜϑϩϯτΤϯυ Ϟνϕʔγϣϯͱٕज़ελοΫͷߟ࡯ ࣮ફฤ ϒϩάτοϓϖʔδͷ࣮૷ τοϓϖʔδվम ϒϩάهࣄຊจϖʔδ
ίϝϯτػೳ NJDSP$.4ͰϓϩϑΟʔϧ؅ཧ

׬શཧղฤ (SBQI2-ͱ͸ (JU)VC"1*Ͱମݧ͢Δ ϛχϚϜόοΫΤϯυ ϛχϚϜϑϩϯτΤϯυ Ϟνϕʔγϣϯͱٕज़ελοΫͷߟ࡯

(SBQI2-ͱ͸

࢓༷Ͱ͢ ن֨ɾཁٻࣄ߲ͷू·Γ ೥.FUBʢ౰࣌'BDFCPPLʣ͕ࣾൃදͨ͠ https://www.youtube.com/watch?v=783ccP__No8

࢓༷Ͱ͢ ن֨ɾཁٻࣄ߲ͷू·Γ ೥.FUBʢ౰࣌'BDFCPPLʣ͕ࣾൃදͨ͠ FacebookΞϓϦͷχϡʔεϑΟʔ υΛϚϧνσόΠε΁ఏڙ͍ͨ͠ Ϩεϙϯεߏ଄ΛϑϩϯτΤϯυ ͰܾΊΒΕΔΑ͏ʹ͢ΔAPIΛͭ͘ Δ͜ͱʹ

ͦͷޙɺϓϩμΫτ΍ϥΠϒϥϦ͕ग़ݱ 3FMBZ "QPMMP "QQ4ZOD )BTVSB 1SJTNB

΍΍͍͜͠ (SBQI2-࢓༷ʹରͯ͠ɺ࣮૷͢ΔͨΊͷखஈ͕ͨ͘͞ Μ͋Δঢ়ଶ

΍΍͍͜͠ (SBQI2-࢓༷ʹରͯ͠ɺ࣮૷͢ΔͨΊͷखஈ͕ͨ͘͞ Μ͋Δঢ়ଶ Introduction to Apollo Server; https://www.apollographql.com/docs/apollo-server/ มΘΒͳ͍͜ͱɿ
GraphQL͸ΫΤϦݴޠͰ͋Δ GraphQLόοΫΤϯυͱ ͦΕΛ࢖͏GraphQLϑϩϯτ Τϯυ͕ొ৔͢Δ

(JU)VC"1*Ͱମݧ

Ұॹʹ৮ͬͯΈ·͠ΐ͏ (JU)VCΞΧ΢ϯτ͕͋Ε͹ମݧͰ͖·͢ https://docs.github.com/en/graphql/overview/explorer [GitHub API Graphql Explorer] Explorer -
GitHub Docs

৮ͬͯΈͯ ඞཁͳσʔλ͚ͩએݴతʹॻ͚͹औಘͰ͖Δ ͳΜͱͳ͘਌ࢠؔ܎ʹ͋Γͦ͏ͳσʔλ͕ͳΜͱͳͦ͘ Μͳ+40/ͰऔಘͰ͖Δ ิ׬͕ޮ͘ʂ

࠷খߏ੒(SBQI2-όοΫΤϯυ

"QPMMP4FSWFSͷαϯϓϧΛഈआ

"QPMMP4FSWFSͷαϯϓϧΛഈआ GraphQL ͷόοΫΤϯυ ͔ΒϑϩϯτΤϯυ·Ͱ ϫϯετοϓ ιϦϡʔγϣϯΛఏڙ͢Δ ϓϥοτϑΥʔϜ

4DIFNB

σʔλϩδοΫ

3FTPMWFS

αʔόʔىಈ

"QPMMP4UVEJP GraphQL αʔόʔ΁઀ଓ Ͱ͖Δϒϥ΢βπʔϧ ϩʔΧϧαʔόʔ΁΋ΞΫ ηεՄೳ Apollo ༷༷Ͱ͢

"QPMMP4UVEJPIUUQMPDBMIPTU

"QPMMP4UVEJPIUUQMPDBMIPTU GraphQLܕ৘ใͱυΩϡϝ ϯτ͕ࣗಈੜ੒͞Ε͍ͯΔ

"QPMMP4UVEJPIUUQMPDBMIPTU

"QPMMP4UVEJPIUUQMPDBMIPTU HTTPϦΫΤετͰ͖Δ

"QPMMP4UVEJPIUUQMPDBMIPTU GraphQL ϦΫΤετ ≒ ͍͢͝POSTϦΫΤετ

GraphQLόοΫΤϯυͷߏ੒ཁૉɹɹɹɹɹɹ Schema Resolver Data

GraphQLόοΫΤϯυͷߏ੒ཁૉɹɹɹɹɹɹ Schema Resolver Data ͲΕ͚ͩ૖େʹͳͬͯ΋ ͜ͷجຊߏ੒ཁૉ͸ ͔ΘΒͳ͍

࠷খߏ੒(SBQI2-ϑϩϯτΤϯυ

"QPMMP$MJFOUΛॳظԽ

ݺͿ2VFSZΛܾఆ

ϑΣονˍඳը

ϑΣονˍඳը [ { title: 'The Awakening', author: 'Kate Chopin',
}, { title: 'City of Glass', author: 'Paul Auster', }, ]

GraphQLϑϩϯτΤϯυ։ൃͷྲྀΕ 2VFSZઃܭ σʔλϑΣον ඳը 📱 Query data Render

Ϟνϕʔγϣϯͱٕज़ελοΫߟ࡯

(SBQI2-όοΫΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ 3&45GVMIUUQFYBNQMFDPNQPTUT ͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ   Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ʣ

(SBQI2-όοΫΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ 3&45GVMIUUQFYBNQMFDPNQPTUT ͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ   Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ʣ ࣮૷ͨ࣌͠఺ͰɺϑϩϯτΤϯυʹυΩϡϝϯτͱαϯυ ϘοΫε؀ڥʢ"QPMMP4UVEJPʣΛఏڙͰ͖Δ఺͕ڧΈ

(SBQI2-όοΫΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ ωΰγΤʔγϣϯ=ௐ੔ͷख͕ؒݮΔ Ϗδωεɾ૊৫ͷεέʔϧʹ଱͑͏Δ 3&45GVMIUUQFYBNQMFDPNQPTUT ͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ   Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ʣ ࣮૷ͨ࣌͠఺ͰɺϑϩϯτΤϯυʹυΩϡϝϯτͱαϯυ
ϘοΫε؀ڥʢ"QPMMP4UVEJPʣΛఏڙͰ͖Δ఺͕ڧΈ

(SBQI2-ϑϩϯτΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ 3&45GVMͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ   Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍

(SBQI2-ϑϩϯτΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ 3&45GVMͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ   Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ ը໘ͷඳըʹඞཁे෼ͳσʔλΛऔಘ͠ɺσʔλπϦʔͱί ϯϙʔωϯτπϦʔΛҰகͤ͞ΒΕΔ఺͕ϝϦοτ

(SBQI2-ϑϩϯτΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ 3&45GVMͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ   Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ ը໘ͷඳըʹඞཁे෼ͳσʔλΛऔಘ͠ɺσʔλπϦʔͱί ϯϙʔωϯτπϦʔΛҰகͤ͞ΒΕΔ఺͕ϝϦοτ ωΰγΤʔγϣϯ=ௐ੔ͷख͕ؒݮΔ ίϯϙʔωϯτͷϝϯςφϯεੑ޲্͕ظ଴Ͱ͖Δ

(SBQI2-Λ࠾༻ͯ͠Ͳ͏ͩͬͨܥͷ࿩ https://engineering.mercari.com/blog/entry/20210818-mercari-shops-nestjs-graphql-server/#around-graphql-server Souzoh Tech Talk #04:Backends For Frontends

(SBQI2-όοΫΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏

(SBQI2-όοΫΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏ TypeScript ʹΑΔόοΫΤϯυΞϓϦFW AngularΠϯεύΠΞυͳModule؅ཧ Apollo Server ϥΠϒϥϦʹΑΔGraphQL

(SBQI2-ϑϩϯτΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏

(SBQI2-ϑϩϯτΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏ by

(SBQI2-ϑϩϯτΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏ by TypeScript ʹΑΔϑϩϯτΤϯυΞϓϦFW ϧʔςΟϯάαϙʔτ Server Rendering ΋αϙʔτɺReactϕʔε

όοΫΤϯυͱϑϩϯτΤϯυ෼͚Δඞཁ͋Δʁ ݸਓϒϩάϨϕϧͰ͸ඞཁ͋Γ·ͤΜ (SBQI2-ͱ͍͏࢓༷ͦͷ΋ͷ͕ɺόοΫΤϯυͱϑϩ ϯτΤϯυͷ෼ۀΛ૝ఆ͍ͯ͠Δʢྫ֎͋Γ(BUTCZ+4ͱ͔ ʣ ͷͰɺ͋͑ͯ෼͚ͯz෼ۀzΛମݧ͢Δ

σϓϩΠେࣄ ຊൃදͰ͸ৄࡉ͸ड़΂·ͤΜ͕ɺͲΜͳ։ൃͰ΋σϓϩ ΠʢϦϦʔεʣՄೳੑΛઌʹ֬อ͢Δ͜ͱΛΦεεϝ͠ ·͢ ୯७ʹɺ Ϣʔβʔɾಡऀ΁Ձ஋Λಧ͚ͯͦ͜ͷΞϓϦ͔ͩΒ ։ൃޙ൒ΑΓલ൒ͷ΄͏͕σϓϩΠָ͕͔ͩΒ ։ൃ࡞ۀͱຊ൪σϓϩΠ࡞ۀͷࠩ෼Λਵ࣌֬ೝͰ͖Δ͔Β

ϒϩάͷߏ੒ هࣄϝλ৘ใ MarkdownϑΝΠϧ

׬શཧղฤ (SBQI2-ͱ͸ (JU)VC"1*Ͱମݧ͢Δ ϛχϚϜόοΫΤϯυ ϛχϚϜϑϩϯτΤϯυ Ϟνϕʔγϣϯͱٕज़ελοΫͷߟ࡯

(SBQI2-͸3&45GVMͳ"1*Λஔ͖׵͑Δ͔ʁ ্Ґޓ׵Ͱ΋ஔ͖׵͑ର৅Ͱ΋ͳ͍ ݸਓϨϕϧɺখن໛ͳ։ൃͳΒΤίγεςϜͷॆ࣮΋͋ Γ3&45GVM"1*ͷ΄͏͕ૣ͍͠ɺେن໛։ൃͰ΋͏· ͍͍ͬͯ͘ΔͳΒ(SBQI2-Λ࠾༻͢Δඞཁ͸ͳ͍ (SBQI2-͸ɺΞϓϦέʔγϣϩδοΫͱ͍͏ΑΓ͸ɺ ։ൃମݧɺϝϯςφϯεମݧʹد༩͢Δ

࣮ફฤ ϒϩάτοϓϖʔδͷ࣮૷ τοϓϖʔδվम ϒϩάهࣄຊจϖʔδ ίϝϯτػೳ NJDSP$.4ͰϓϩϑΟʔϧ؅ཧ

ϒϩάτοϓϖʔδͷ࣮૷

GraphQLόοΫΤϯυɹɹɹɹɹɹɹͷߏ੒ཁૉɹɹɹɹɹɹ Schema NestJS Resolver Data

/FTU+4ͷ৔߹ (SBQI2-4DIFNBΛ࡞Δํ๏͕;ͨͭ͋Δ ίʔυϑΝʔετ Ξϓϩʔν TypeScriptϑΝΠϧ GraphQL Schema εΩʔϚϑΝʔετ Ξϓϩʔν
GraphQL Schema TypeScriptϑΝΠϧ

/FTU+4ͷ৔߹ (SBQI2-4DIFNBΛ࡞Δํ๏͕;ͨͭ͋Δ ίʔυϑΝʔετ Ξϓϩʔν TypeScriptϑΝΠϧ GraphQL Schema εΩʔϚϑΝʔετ Ξϓϩʔν
GraphQL Schema TypeScriptϑΝΠϧ ͪ͜ΒΛ࠾༻ʢΦεεϝʣ TSͷίʔσΟϯάʹूதͰ͖Δ SchemaΛਖ਼ʹ͍ͨ͠ ։ൃνʔϜͰ༗༻

ίʔυϑΝʔετΞϓϩʔνͰͷ։ൃ (SBQI2-.PEVMFॳظԽ .PEFMΫϥεͷఆٛ σʔλΛฦ͢ϩδοΫΛ༻ҙ 3FTPMWFSΫϥεͰඥ෇͚

(SBQI2-.PEVMFॳظԽ

(SBQI2-.PEVMFॳظԽ ࣗಈͰ Schema Λग़ྗ͢Δઃఆ

.PEFMΫϥεͷఆٛ

.PEFMΫϥεͷఆٛ Decorator ʹΑΓ Schema΁ͷ ม׵ର৅ͩͱೝࣝ͞ΕΔ

σʔλͱ3FTPMWFS Decorator ʹΑΓ Schema΁ͷ ม׵ର৅ͩͱೝࣝ͞ΕΔ

σʔλͱ3FTPMWFS Decorator ʹΑΓ Schema΁ͷ ม׵ର৅ͩͱೝࣝ͞ΕΔ Schema, Data, Resolver ͕ἧͬͨͷͰαʔόʔΛى
ಈͰ͖Δ

ࣗಈੜ੒͞Εͨ4DIFNBϑΝΠϧ ։ൃதɺSchemaͷ͜ͱΛ ؾʹ͠ͳͯ͘Α͘ͳΔʂ

"QPMMP4UVEJPͰ֬ೝͰ͖·͢

4DIFNB σʔλϩδοΫ 3FTPMWFS Schema Resolver Data GraphQLόοΫΤϯυɹɹɹɹɹɹɹͷߏ੒ཁૉɹɹɹɹɹɹ NestJS

/FYUKT(SBQI2-ϑϩϯτଆͷ४උ (SBQI2-ΫϥΠΞϯτϥΠϒϥϦͷબఆ σʔλϑΣονΛࢼ͠ʹ࣮૷ ϨϯμϦϯάΛ࣮૷ (SBQI2-$PEF(FOFSBUPSͷಋೖ

(SBQI2-ΫϥΠΞϯτϥΠϒϥϦͷબఆ /FTU+4ͱҟͳΓ(SBQI2-ඪ४αϙʔτͰ͸ͳ͍ͷͰ ࣗ෼ͨͪͰબͿඞཁ͕͋Δ /FTU+4͕"QPMMP4FSWFSͳͷͰ/FYUKT͸"QPMMP $MJFOUͰ΋0,͕ͩʜ

(SBQI2-ΫϥΠΞϯτϥΠϒϥϦͷબఆ /FTU+4ͱҟͳΓ(SBQI2-ඪ४αϙʔτͰ͸ͳ͍ͷͰ ࣗ෼ͨͪͰબͿඞཁ͕͋Δ /FTU+4͕"QPMMP4FSWFSͳͷͰ/FYUKT͸"QPMMP $MJFOUͰ΋0,͕ͩʜ Ωϟογϡઓུ͕γϯϓϧ

σʔλϑΣονΛ࣮૷

σʔλϑΣονΛ࣮૷ ϛχϚϜߏ੒ͱࣅͯΔ

ϑΣονͨ͠σʔλͰϨϯμϦϯά

(SBQI2-$PEF(FOFSBUPSΛಋೖ 2VFSZΛ5ZQF4DSJQUͳͲʹग़ྗͰ͖ΔΤίγεςϜ ZBSODPEFHFO GraphQL query TypeScriptϑΝΠϧ

(SBQI2-$PEF(FOFSBUPSΛಋೖ 2VFSZΛ5ZQF4DSJQUͳͲʹग़ྗͰ͖ΔΤίγεςϜ ZBSODPEFHFO GraphQL query TypeScriptϑΝΠϧ ը໘։ൃதɺSchemaͷ͜ͱΛ ؾʹ͠ͳͯ͘Α͘ͳΔʂ

(SBQI2-$PEF(FOFSBUPSΛಋೖ codegen.yml posts.query.gql

(SBQI2-$PEF(FOFSBUPSΛಋೖ codegen.yml posts.query.gql yarn codegen

(SBQI2-$PEF(FOFSBUPSΛಋೖ generaterd.graphql.ts

(SBQI2-$PEF(FOFSBUPSΛಋೖ ࣗಈੜ੒͞ΕͨTypeScriptϑΝΠϧ͕ importͯ͠࢖͑Δ => GraphQL ͱ TypeScript Λ੾Γ཭ͤΔ

2VFSZઃܭ σʔλϑΣον ඳը 📱 Query data Render GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ Next.js

2VFSZઃܭ σʔλϑΣον ඳը 📱 Query urql Render GraphQL Code Generator
GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ Next.js

ҎޙɺͲͷ෦෼ʹ֘౰͢Δ࡞ۀͳͷ͔   Ͱ͖Δ͚ͩ໌ه͠·͢ ։ൃͷྲྀΕΛͻͱͱ͓Γମݧ͠·ͨ͠ NestJS Next.js

ҎޙɺͲͷ෦෼ʹ֘౰͢Δ࡞ۀͳͷ͔   Ͱ͖Δ͚ͩ໌ه͠·͢ ։ൃͷྲྀΕΛͻͱͱ͓Γମݧ͠·ͨ͠ NestJS Next.js ͜Μͳײ͡Ͱˠ

τοϓϖʔδվम

εΩοϓ͢Δ͕ಋೖ͢Δཁૉ όοΫΤϯυଆ 1PTUHSF42- هࣄͷ߲໨௥Ճ 1SJTNBʹΑΔ%#ΞΫηε ϑϩϯτΤϯυଆ .BUFSJBM6*ʢ.6*ʣͷಋೖ

εΩοϓ͢Δ͕ಋೖ͢Δཁૉ όοΫΤϯυଆ 1PTUHSF42- هࣄͷ߲໨௥Ճ 1SJTNBʹΑΔ%#ΞΫηε ϑϩϯτΤϯυଆ .BUFSJBM6*ʢ.6*ʣͷಋೖ \ JEGDDEEDEBDBDGFF
UJUMF3BJMTͷECTFFEͰେྔσʔλͷ౤ೖ UZQFBSUJDMF FNPKJ💎 QVCMJTI%BUF5; DPOUFOU1BUIQPTUTBSUJDMFTSBJMTQBSBMMFM TFFENE ^ \ JEEBBGEDGCED UJUMF࠷ڧΩʔϘʔυܾఆઓ UZQFEJBSZ FNPKJ💎 QVCMJTI%BUF5; DPOUFOU1BUITUPSBHFQPTUTBSUJDMFTOFTUKTNE ^

εΩοϓ͢Δ͕ಋೖ͢Δཁૉ όοΫΤϯυଆ 1PTUHSF42- هࣄͷ߲໨௥Ճ 1SJTNBʹΑΔ%#ΞΫηε ϑϩϯτΤϯυଆ .BUFSJBM6*ʢ.6*ʣͷಋೖ

هࣄϒϩοΫɺ೔هϒϩοΫʹ෼͚͍ͨ %#ͷ߲໨ΛແࠎʹҰཡද͍ࣔͯ͠Δঢ়ଶ

%#ͷ߲໨ʹର͢ΔߜΓࠐΈΛݕ౼ όοΫΤϯυଆ 1PTUHSF42- هࣄͷ߲໨௥Ճ 1SJTNBʹΑΔ%#ΞΫηε ϑϩϯτΤϯυଆ .BUFSJBM6*ʢ.6*ʣͷಋೖ \ JEGDDEEDEBDBDGFF
UJUMF3BJMTͷECTFFEͰେྔσʔλͷ౤ೖ UZQFBSUJDMF FNPKJ💎 QVCMJTI%BUF5; DPOUFOU1BUIQPTUTBSUJDMFTSBJMTQBSBMMFM TFFENE ^ \ JEEBBGEDGCED UJUMF࠷ڧΩʔϘʔυܾఆઓ UZQFEJBSZ FNPKJ💎 QVCMJTI%BUF5; DPOUFOU1BUITUPSBHFQPTUTBSUJDMFTOFTUKTNE ^

%#ͷ߲໨ʹର͢ΔߜΓࠐΈΛݕ౼ όοΫΤϯυଆ 1PTUHSF42- هࣄͷ߲໨௥Ճ 1SJTNBʹΑΔ%#ΞΫηε ϑϩϯτΤϯυଆ .BUFSJBM6*ʢ.6*ʣͷಋೖ \ JEGDDEEDEBDBDGFF
UJUMF3BJMTͷECTFFEͰେྔσʔλͷ౤ೖ UZQFBSUJDMF FNPKJ💎 QVCMJTI%BUF5; DPOUFOU1BUIQPTUTBSUJDMFTSBJMTQBSBMMFM TFFENE ^ \ JEEBBGEDGCED UJUMF࠷ڧΩʔϘʔυܾఆઓ UZQFEJBSZ FNPKJ💎 QVCMJTI%BUF5; DPOUFOU1BUITUPSBHFQPTUTBSUJDMFTOFTUKTNE ^ GraphQL Query Ͱ ύϥϝʔλΛड͚औΔඞཁ͕͋Δ

(SBQI2-2VFSZ"SHVNFOUTͷར༻ ྫ͑͹ɺهࣄΛBSJUJDMF͔EJBSZͰߜΓ͜Ή৔߹ Query

(SBQI2-2VFSZ"SHVNFOUTͷར༻ ྫ͑͹ɺهࣄΛBSJUJDMF͔EJBSZͰߜΓ͜Ή৔߹ Query ηοτͰόοΫΤϯυଆͷ ߜΓࠐΈػೳ΋ඞཁ

ٕज़هࣄͱ೔هͰͦΕͧΕ݁Ռ͕΄͍͠ Query

ٕज़هࣄͱ೔هͰͦΕͧΕ݁Ռ͕΄͍͠ Query ͜Ε͸ΤϥʔʹͳΔ

(SBQI2-2VFSZ"MJBTFTͷར༻ 2VFSZʹରͯ͠ɺ೚ҙͷΩʔ໊ʢ"MJBTʣΛ͚ͭΔ Query

(SBQI2-2VFSZ"MJBTFTͷར༻ 2VFSZʹରͯ͠ɺ೚ҙͷΩʔ໊ʢ"MJBTʣΛ͚ͭΔ Query posts.query.gql ʹॻ͘

(SBQI2-2VFSZ"MJBTFTͷར༻ 2VFSZʹରͯ͠ɺ೚ҙͷΩʔ໊ʢ"MJBTʣΛ͚ͭΔ Query posts.query.gql ʹॻ͘ yarn codegen ࣮ߦ

2VFSZઃܭ σʔλϑΣον ඳը 📱 Query urql Render GraphQL Code Generator
GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ Next.js

"MJBTFTʹΑΓผΩʔͰσʔλऔಘ AliasʹରԠͨ͠Ωʔ͕औಘͰ͖Δ urql

(SBQI2-2VFSZ'SBHNFOUTͷར༻ BSUJDMFTͱEJBSJFTɺࢦఆ͍ͯ͠ΔϑΟʔϧυ͕ಉ͡ Query

(SBQI2-2VFSZ'SBHNFOUTͷར༻ BSUJDMFTͱEJBSJFTɺࢦఆ͍ͯ͠ΔϑΟʔϧυ͕ಉ͡ Query yarn codegen ࣮ߦ

"MJBTFTʹΑΓผΩʔͰσʔλऔಘ fragmentsʹରԠ͢Δܕ PostFragment ͕ࣗಈੜ੒ Render

"MJBTFTʹΑΓผΩʔͰσʔλऔಘ fragmentsʹରԠ͢Δܕ PostFragment ͕ࣗಈੜ੒ Render PostFragment[] ͷඳըΛ PostListView ίϯϙʔωϯτʹҰ೚Ͱ͖Δ
fragments ͱ ϑϩϯτΤϯυͷίϯϙʔωϯτ ΛରԠ͚ͮΔٕज़: ϑϥάϝϯτίϩέʔγϣϯ

JOEFYUTY͕γϯϓϧʹ Render

͜͜·ͰͰొ৔ͨ͠ཁૉ 2VFSZ"SHVNFOUT 2VFSZ΁ύϥϝʔλΛ౉͢ ߜΓࠐΈͳͲɻ3&45GVM"1*ͷ2VFSZ 1BSBNFUFSʹ͍ۙ 2VFSZ"MJBTFT 2VFSZʹ೚ҙͷ໊લΛ͚ͭΔ ಉ͡2VFSZͰҟͳΔߜΓࠐΈΛߦ͏৔߹ͳ ͲɻμογϡϘʔυը໘ͳͲͰظ଴
'SBHNFOUT ϑΟʔϧυڞ௨Խ͢Δ ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚ ϑϥάϝϯτίϩέʔγϣϯ

هࣄຊจϖʔδ

هࣄϖʔδͰऔಘ͍ͨ͠σʔλΛߟ͑Δ औಘ݅਺͸݅Ͱ0, 63-ύε৘ใ͔Βಛఆ͍ͨ͠ ຊจʢ.BSLEPXOʣΛऔಘ͍ͨ͠

2VFSZ͕ઌʹܾ·Δύλʔϯ

ϑΟʔϧυݸผͷ3FTPMWFSΛఆٛ͢Δ Resolver CPEZ.BSLEPXOͱ͍͏ϑΟʔϧυ͕ࢦఆ͞Εͨͱ͖ ͚ͩൃಈ͢Δ3FTPMWFSΛఆٛɹ औಘίετ͕ߴ͍ɺϩδοΫΛ੾Γ཭͍ͨ͠ϑΟʔϧυ ͷ3FTPMWFSΛ࣮૷͢Δͱ͖ʹ༗༻

·ͣ͸݅औಘ͢Δ fi OE1PTU͔Β Resolver

·ͣ͸݅औಘ͢Δ fi OE1PTU͔Β Resolver Argument Λఆٛ

ϑΟʔϧυݸผͷ3FTPMWFSΛఆٛ͢Δ Resolver

"QPMMP4UVEJPͰୟ͍ͯΈΔ Resolver

"QPMMP4UVEJPͰୟ͍ͯΈΔ Resolver ͍͍ײ͡

"QPMMP4UVEJPͰୟ͍ͯΈΔ Resolver contentPath, titleͱ bodyMarkdownͰ ࣮૷͕ผ

/FYUKTଆɺ2VFSZΛ௥Ճ Ұཡͱಉ͡ϑΝΠϧʹ௥هͯ͠0, Query ↓ৄࡉϖʔδ༻ͷQueryΛ௥ه

/FYUKTଆɺ2VFSZΛ௥Ճ Ұཡͱಉ͡ϑΝΠϧʹ௥هͯ͠0, Query yarn codegen ࣮ߦ ↓ৄࡉϖʔδ༻ͷQueryΛ௥ه

/FYUKTଆɺ2VFSZΛ௥Ճ Ұཡͱಉ͡ϑΝΠϧʹ௥هͯ͠0, Query ↓ৄࡉϖʔδ༻ͷQueryΛ௥ه PostDetailPageDocument = Queryจࣈྻɹ͕ੜ੒͞ΕΔ

QPTUT<TMVH>JOEFYUTY urql

खʹೖΕͨ)5.-Λ࢖ͬͯඳը Render https://zenn.dev/waddy/articles/intro-zenn-markdown

खʹೖΕͨ)5.-Λ࢖ͬͯඳը Render

Ұཡຊจ͕࣮૷Ͱ͖ͨ Next.js

'SBHNFOUT ϑΟʔϧυڞ௨Խ͢Δ ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚ ϑϥάϝϯτίϩέʔγϣϯ 'JFME3FTPMWFS ಛఆϑΟʔϧυઐ༻3FTPMWFS औಘʹίετ͕ߴ͍'JFMEͳͲ΁ݸผͷ 3FTPMWFSΛׂΓ౰ͯΔ࢓༷

ίϝϯτػೳ

هࣄຊจʹ͚ͬͭ͘Δ͜Εͷ͜ͱ Next.js

هࣄຊจʹ͚ͬͭ͘Δ͜Εͷ͜ͱ Next.js ݱ࣮Ͱຊ౰ʹඞཁ͔Ͳ͏͔ͱ͍͏࿩͸͋Δ͕ɺ Mutation ͷαϯϓϧͱ࣮ͯ͠૷͠·͠ΐ͏

εΩοϓ͢Δ͕࣮૷͢Δཁૉ όοΫΤϯυଆ ίϝϯτʢJNQSFTTJPOTʣςʔϒϧΛ௥Ճ QPTUTςʔϒϧͷࢠͱ͢Δ هࣄʹඥͮ͘JNQSFTTJPOTΛಡΈग़͢2VFSZ

εΩοϓ͢Δ͕࣮૷͢Δཁૉ όοΫΤϯυଆ ίϝϯτʢJNQSFTTJPOTʣςʔϒϧΛ௥Ճ QPTUTςʔϒϧͷࢠͱ͢Δ هࣄʹඥͮ͘JNQSFTTJPOTΛಡΈग़͢2VFSZ { "id": "394474e1-51f4-4fe5-a498-e804cbceeadd", "sticker":
"Thanks", "comment": "ࢀߟʹͳͬͨ", "postId": "fc8c04d6-6007-03dc-da13-c9ac29fe66e7", "twitterId": "waddy_u", "createdAt": "2022-01-30T19:34:22.000Z" },

*NQSFTTJPOͷ.VUBUJPO Resolver

*NQSFTTJPOͷ.VUBUJPO Schema

*NQSFTTJPOͷ.VUBUJPO Schema input ͭ·Γ Mutation ͷೖྗʹରԠ

*NQSFTTJPOͷ.VUBUJPO Schema input CreateImpressionInput { comment: String postId: String!
sticker: String! twitterId: String } ↑schema.gql

*NQSFTTJPOͷ.VUBUJPO Schema

ϑϩϯτΤϯυଆɿऔಘ͸Πϝʔδ͕༙͘ ຊจऔಘ࣌ʹɺ*NQSFTTJPO΋औಘ͢Δ Query

ϑϩϯτΤϯυଆɿऔಘ͸Πϝʔδ͕༙͘ Query

.VUBUJPOͷ࣮ߦ͸ɺϒϥ΢β͔Β ͜Ε·Ͱ͸HFU4FSWFS4JEF1SPQTͰσʔλΛऔಘ ͠ɺϨϯμϦϯάʹ࢖͍ͬͯͨ HFU4FSWFS4JEF1SPQT͸/FYUKTαʔόʔ͔Β /FTU+4αʔόʔ΁ͷ௨৴ Next.js

.VUBUJPOͷ࣮ߦ͸ɺϒϥ΢β͔Β ϑΥʔϜೖྗૹ৴ͨ͠ͱ͖ɺ୭͕Ͳ͜ʹૹΔʁ ϒϥ΢β͕/FTU+4αʔόʔʹ.VUBUJPOΛૹΔ Next.js

.VUBUJPOͷ࣮ߦ͸ɺϒϥ΢β͔Β ϑΥʔϜೖྗૹ৴ͨ͠ͱ͖ɺ୭͕Ͳ͜ʹૹΔʁ ϒϥ΢β͕/FTU+4αʔόʔʹ.VUBUJPOΛૹΔ Next.js React ίϯϙʔωϯτ͔Β DomEvent ʹ൓Ԡͯ͠ͳʹ ͔͢Δͱ͖
=> React Hooks ͕࢖͑Δ

*NQSFTTJPO࡞੒ͷIPPLTΛߟ͑Δ Next.js ϑΥʔϜೖྗૹ৴ͨ͠ͱ͖ɺ.VUBUJPOΛ࣮ߦͰ͖ Ε͹Αͦ͞͏ɻ ˣΈ͍ͨͳΠϝʔδ

.VUBUJPOΛఆٛ Query

.VUBUJPOΛఆٛ Query yarn codegen

.VUBUJPOΛఆٛ Query hooks Λࣗಈੜ੒ͯ͘͠Ε Δɻਆɻ

(SBQI2-$PEF(FOFSBUPSΛಋೖ codegen.yml posts.query.gql

(SBQI2-$PEF(FOFSBUPSΛಋೖ codegen.yml posts.query.gql ͜ͷਓͷ͓͔͛

ϑΥʔϜૹ৴ͰIPPLTΛ࣮ߦ Render

'SBHNFOUT ϑΟʔϧυڞ௨Խ͢Δ ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚ ϑϥάϝϯτίϩέʔγϣϯ /FTUFE'JFME ϑΟʔϧυͰؔ܎Λදݱ l(SBQIzͨΔॴҎͰ΋͋ΔɻϒϩάͷྫͰ ͸هࣄͱίϝϯτͷ਌ࢠؔ܎Ͱར༻ 'JFME3FTPMWFS ಛఆϑΟʔϧυઐ༻3FTPMWFS औಘʹίετ͕ߴ͍'JFMEͳͲ΁ݸผͷ 3FTPMWFSΛׂΓ౰ͯΔ࢓༷ .VUBUJPO ϒϥ΢β͔Βͷܦ࿏͕ൃੜ (SBQI2-$PEF(FOFSBUPSΛ࢖͑͹ 3FBDU)PPLTͱͯ͠࢖͑Δ

NJDSP$.4͔Βσʔλऔಘ

NJDSP$.4ͱ͸ ࡞੒ͨ͠ίϯςϯπΛAPIͰฦͤΔ ೔ຊ੡ CMS αʔϏε https://microcms.io

ϒϩάͷߏ੒ هࣄϝλ৘ใ MarkdownϑΝΠϧ ϓϩϑΟʔϧ

ϒϩάͷߏ੒ هࣄϝλ৘ใ MarkdownϑΝΠϧ ϓϩϑΟʔϧ ֎෦αʔϏε͔Β σʔλΛऔಘ͢Δྫ

σϞ or ίʔυϦʔσΟϯά ʢ͕࣌ؒ͋Ε͹ʣ

ʢ͕࣌ؒͳ͚Ε͹ʣ݁Ռ

ʢ͕࣌ؒͳ͚Ε͹ʣ݁Ռ ϑϩϯτΤϯυͱͯ͠͸ ཪଆ͕DBͳͷ͔ SaaSͳͷ͔ ؾʹͤͣQueryΛߏ੒Ͱ͖Δ

࣮ફฤ ϒϩάτοϓϖʔδͷ࣮૷ τοϓϖʔδվम ϒϩάهࣄຊจϖʔδ ίϝϯτػೳ NJDSP$.4ͰϓϩϑΟʔϧ؅ཧ

'SBHNFOUT ϑΟʔϧυڞ௨Խ͢Δ ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚ ϑϥάϝϯτίϩέʔγϣϯ /FTUFE'JFME ϑΟʔϧυͰؔ܎Λදݱ l(SBQIzͨΔॴҎͰ΋͋ΔɻϒϩάͷྫͰ ͸هࣄͱίϝϯτͷ਌ࢠؔ܎Ͱར༻ 'JFME3FTPMWFS ಛఆϑΟʔϧυઐ༻3FTPMWFS औಘʹίετ͕ߴ͍'JFMEͳͲ΁ݸผͷ 3FTPMWFSΛׂΓ౰ͯΔ࢓༷ .VUBUJPO ϒϥ΢β͔Βͷܦ࿏͕ൃੜ (SBQI2-$PEF(FOFSBUPSΛ࢖͑͹ 3FBDU)PPLTͱͯ͠࢖͑Δ ֎෦αʔϏεͱ࿈ܞ (SBQI2-αʔόʔͰٵऩ ϑϩϯτΤϯυ͔Β2VFSZΛઃܭ͢Δͱ ͖ɺཪଆΛؾʹ͢Δඞཁ͕ͳ͍

͓ΘΓʹ

গ͠Ͱ΋(SBQI2-Λ࢖͏Πϝʔδ͕༙͍ͨΒخ͍͠Ͱ͢ 3&45GVM"1*Λஔ͖׵͑Δ΋ͷͰ͸ͳ͍ɺదࡐదॴ ͨͩɺ"MJBTFT 'SBHNFOUT 'JFME3FTPMWFSͱ͍ͬ ͨڧྗͳ࢓༷ͷ΋ͱɺ࢖͏ଆͰ2VFSZΛߏ੒Ͱ͖Δ఺ ͕ັྗ ΞϓϦέʔγϣϯΛૄ݁߹ʹͰ͖ΔϙΠϯτ૊৫Λ εέʔϧͤ͞ΔͨΊͷ෼ۀϙΠϯτ
ݸਓ։ൃͰ΋"1*αʔόʔ͕/FTU+4ͻͱͭͰࡁΉ͔΋

ࠓ೔ͷ಺༰͸;FOOͷຊͰചͬͯ·͢ https://zenn.dev/waddy/books/graphql-nestjs-nextjs-bootcamp

ࢀߟจݙ https://www.oreilly.co.jp/books/9784873118932/ https://booth.pm/ja/items/1576562 https://www.oreilly.co.jp/books/9784873119380/

個人ブログサイトを構築して学ぶGraphQL NestJSとNext.js使うよ！ / gra...

個人ブログサイトを構築して学ぶGraphQL NestJSとNext.js使うよ！ / graphql nestjs nextjs bootcamp

More Decks by Yusuke Wada

Other Decks in Technology

Featured

Transcript