Typescriptで始めるGraphQL入門_LG勉強会.pdf

Transcript

1. Typescript Ͱ࢝ΊΔ GraphQL ೖ໳ גࣜձࣾϥϒάϥϑ ։ൃΠϯλʔϯ ઙҪྋଠ 2025/06/25 created by ruribou
2. ࣗݾ঺հ ઙҪ ྋଠʢ͍͋͞ Γΐ͏ͨʣ ౦ژిػେֶཧ޻ֶ෦ཧ޻ֶՊ ಛఆඇӦར׆ಈ๏ਓ NxTEND झຯ↓ ཱྀɺ໺ٿ؍ઓɺΞΠυϧϚελʔ
3. ࠓճ࿩͢͜ͱ • GraphQLͱ͸ͳʹ͔ • ۩ମతͳ࣮૷ • ࣮ࡍʹୟ͍ͯΈΔ͜ͱ
4. ࠓճ࿩͞ͳ͍͜ͱ • GraphQLͷ࣮༻ੑ • Ԡ༻ྫ
5. GraphQL ͱ͸ͳΜͧ΍
6. HTTPܦ༝ͰDB΍αʔϏεΛૢ࡞͢Δ ͨΊͷSQLతͳݴޠʴ࢓૊Έ
7. ۩ମతͳҧ͍ • ΫϥΠΞϯτओಋͰඞཁͳ৘ใ͚ͩΛऔಘ • RailsͷREST APIͩͱɺ/users/1 → ݻఆͷJSON͕ؼͬͯ͘Δͷʹରͯ͠GraphQL͸ΫϥΠ Ξϯτ͕{ user(id:1) { id, name, posts { title } } } ͷΑ͏ʹɺʮͲͷϑΟʔϧυ͕΄͍͔͠ʯ Λࣗ༝ʹهड़Ͱ͖Δ • ୯ҰΤϯυϙΠϯτ & ౷Ұతͳૢ࡞Ϟσϧ • Rails ͷίϯτϩʔϥ×HTTPϝιουʢGET/POST/PUT/DELETEʣͰଟ਺ͷΤϯυϙΠϯ τΛ؅ཧ͢Δ୅ΘΓʹɺGraphQL ͸جຊతʹ /graphql 1͚ͭͩ
8. ࣮૷ฤ
9. ࠓճͷٕज़ߏ੒ Typescript + Hono + Prisma + Supabase + GraphQL
10. Hono • ೔ຊਓ͕࡞ͬͨɻTypescriptͷ௒ܰྔͰߴੑೳͳWebϑϨʔϜϫʔΫɻ • όοΫΤϯυΊͪΌΫιָɻ
11. Prisma • ݴΘͣͱ஌ΕͨJavascipt / Typescript ͷORM • σʔλϕʔεϚΠάϨʔγϣϯ΋Ͱ͖ΔΑ
12. Supabase PostgreSQL ΛϕʔεʹೝূɾετϨʔδɾϦΞϧλΠϜػೳΛඋ͑ͨ ΦʔϓϯιʔεͷόοΫΤϯυଈ੮αʔϏε
13. ࠓճ͸߃ྫ͚ͩͲTodoΞϓϦͰ ࣮૷͍ͯ͘͠Α
14. PrismaͷεΩʔϚ model Todo { id Int @id @default(autoincrement()) title String completed Boolean @default(false) createdAt DateTime @default(now()) }
15. GraphQL εΩʔϚఆٛ export const schema = ` type Todo { id: Int! title: String! completed: Boolean! createdAt: String! } type Query { todos: [Todo!]! } type Mutation { addTodo(title: String!): Todo! toggleTodo(id: Int!): Todo! deleteTodo(id: Int!): Boolean! } `; ɾʮʂʯ͸ඞਢΧϥϜ ɾܕఆٛͱ۩ମతͳૢ࡞Λ QueryͱMutationͰఆٛ
16. QueryͱMutationͱ͸ • Query • CRUDͷRʢREADʣΛ୲౰ • RESTͰ͍͏ͱGET • Mutation • CRUDͷCʢCreateʣ, UʢUpdateʣ, DʢDELETEʣΛ୲౰ • RESTͰ͍͏ͱPOST/PUT/PATCH/DELETE͋ͨΓ • Subscription • αʔόʔͷߋ৽ΛϦΞϧλΠϜͰ௨஌ʢྫɿଞਓͷૢ࡞Λଈ࣌มߋʣ • ࠓճ͸࢖Θͳ͍
17. Resolver ͷ࣮૷
18. ResolverͬͯͳΜͧ΍ • SchemaͰԿ͕Ͱ͖Δ͔Λఆٛ͠ɺ͜ͷResolverͰͦΕΛͲ͏࣮ݱ͢Δ͔Λ࣮૷͢Δ • ۩ମతͳCRUDૢ࡞ͷத਎ͱ΋ݴ͑Δ • SchemaͰఆٛ͞ΕͨQuery΍Mutation͕࣮ࡍʹͲͷΑ͏ʹͯ͠σʔλΛऔಘɺมߋ͢Δ ͷ͔Λ۩ମతʹ࣮૷
19. ۩ମతͳ࣮૷ const rootResolver: RootResolver = () => ({ todos: async () => { const todos = await prisma.todo.findMany({ orderBy: { createdAt: 'desc' } }); return todos.map(todo => ({ ...todo, createdAt: formatDate(todo.createdAt), })); }, addTodo: async ({ title }: { title: string }) => { const todo = await prisma.todo.create({ data: { title } }); return { ...todo, createdAt: formatDate(todo.createdAt), }; }, toggleTodo: async ({ id }: { id: number }) => { const todo = await prisma.todo.findUnique({ where: { id } }); if (!todo) throw new Error('Not found'); const updated = await prisma.todo.update({ where: { id }, data: { completed: !todo.completed }, }); return { ...updated, createdAt: formatDate(updated.createdAt), }; }, deleteTodo: async ({ id }: { id: number }) => { const todo = await prisma.todo.findUnique({ where: { id } }); if (!todo) return false; await prisma.todo.delete({ where: { id } }); return true; }, });
20. ΫΤϦૢ࡞Λͯ͠ΈΔ
21. ࣗ෼͕ೖ໳ͨ͠ײ૝ • ΫϥΠΞϯτ͕ຊ౰ʹඞཁͳ৘ใͷΈΛ͚ͨͨΔͷ͕ྑ͍ • REST APIͩͱʮޙ͔Β͜ͷ৘ใ͕ཉ͍͠ʯʮ͜ͷ৘ใ༨ܭͩʯΈ͍ͨͳ͜ͱ͕ ݁ߏى͖͏Δ • ܕ෇͖εΩʔϚͳͷͰɺͲΜͳΫΤϦ͕౤͛ΒΕΔͷ͔΍Ϩεϙϯεʹ͍ͭͯɺܕͱͯ͠೺ ѲͰ͖Δ҆৺ײ͕͋Δ • Honoͱ૬ੑ͕ྑ͔ͬͨͷͰخ͍͠