Prisma + GraphQLを最高にする Schema Builderをつくってみた

repository: https://github.com/planet-graphql/planet-graphql
tutorial: https://zenn.dev/dekimasoon/articles/31f4a740f670af

Transcript

1. Prisma + GraphQLを最高にする Schema Builderをつくってみた @dekimasoon 2022-08-31 GraphQL Tokyo #18 Lightning talks
2. 自己紹介 岩田 学 @dekimasoon パーソルホールディングス株式会社 エンゲージメントプロダクト開発部 所属
3. 経緯 ある日、手持ちの仕事がなくなった そこで上司の道家さんに相談
4. 経緯 イケてるエンジニア採りたいですよね！ でも正直 “パーソルホールディングス” じゃ誰も来てくれないっす OSSとか作って、アピール大作戦どうですか？
5. 経緯 道家さん「いいよ！」
6. 経緯 私「やったぜ」
7. 作ったもの PlanetGraphQL PlanetGraphQLはPrismaとGraphQLを最高にするGraphQL Schema Builderです シンプルで型安全、実際のプロダクトに必要なカスタマイズ性を備えることを目指しています
8. なぜ作ったか その時点でのNode.jsのCode FirstなSchema Builder - GraphQL.js: リファレンス。人間が直接使うものではない。 - TypeGraphQL: お世話になりました。でもClass使いたくないんじゃ(宗教)！ - typegraphql-prisma: 自動生成すごい！でももっと細かくカスタマイズしたい… - GraphQL Nexus: パイオニア。Prisma公式推し。 - nexus-prisma: 開発がぜんぜん進まないやんけ！ - Pothos: 新星！型も考慮したPluginシステムが素晴らしい。 - prisma-plugin: 素晴らしい！これでいいかもしれない - でもPrismaにフォーカスしたらもっと研ぎ澄ませられるかも…
9. なぜ作ったか どれにも満足できず、 自分ならより良いものが作れると過信していた (敗因)
10. やりたかったこと Hasuraと比較対象になりうる生産性の高さ その上で、実プロダクトの要求に耐えるカスタマイズ性
11. 作ったもの const usersQuery = pg.query({ name: 'users', field: (b) => b .object(() => objects.User) .list() .prismaArgs(() => args.findManyUser.build()) .resolve(({ prismaArgs }) => prisma.user.findMany(prismaArgs) ) }) query { users ( where: { name: { contains: "diego" } posts: { some: { isPublished: true } } } orderBy: [{ name: asc }, { id: asc }] take: 10 ) { id name posts { id title } } } これだけで こんな感じで呼び出し可能に
12. 作ったもの const usersQuery = pg.query({ name: 'users', field: (b) => b .object(() => objects.User) .list() .prismaArgs(() => args.findManyUser.edit((f) => ({ where: f.where.edit((f) => ({ name: f.name, email: f.email, })), orderBy: f.orderBy.select('UserOrderByWithRelationInputList').edit((f) => ({ name: f.name, id: f.id, })), take: f.take.default(10).validation((z) => z.max(100)), })).build()) .resolve(({ prismaArgs }) => prisma.user.findMany(prismaArgs) ) }) 必要な部分のみに限定したり、 デフォルト値やバリデーションの設定が可能 型補完も効くから楽ちん
13. 作ったもの const usersQuery = pg.query({ name: 'users', field: (b) => b .object(() => objects.User) .relay() .resolve(({ prismaArgs }) => prisma.user.findMany(prismaArgs) ) }) Relay対応も一発 query { users(first: 10) { edges { node { id name posts { id title } } cursor } pageInfo { hasNextPage hasPreviousPage } } } ばっちり！
14. 作ったもの const user = pgpc.redefine({ name: 'User', fields: (f, b) => ({ ...omit(f, 'name'), postCount: b.int(), }), relations: () => getRelations('User'), }) 各テーブルに対応する オブジェクトタイプの調整も可能 const userWithoutRelations = user.copy({ name: 'UserWithoutRelations', fields: (f) => omit(f, 'post'), }) コピーもできる
15. 作ったもの const user = pgpc.redefine({ name: 'User', fields: (f, b) => ({ ...omit(f, 'name'), postCount: b.int(), }), relations: () => getRelations('User'), }) user.implement((f) => ({ postCount: f.postCount.resolve((params) => { return pg.dataloader(params, async (userList) => { const userIds = userList.map((x) => x.id) const resp = await prisma.post.groupBy({ _count: { _all: true }, by: ['userId'], where: { userId: { in: userIds } }, }) return userIds.map((id) => resp.find((x) => x.userId === id)?._count._all ?? 0) }) }) })) Field Resolverの実装例 型安全なDataLoaderも組み込み
16. 作ったもの const crateUserMutation = pg.mutation({ name: 'createUser', field: (b) => b .object(() => user) .args((b) => ({ input: b.input(() => createUserInput) })) .auth(({ context }) => context.isAdmin) .resolve(({ args }) => prisma.user.create({ data: args.input }) ) }) フィールドごとの権限制御も可能
17. まとめ Prismaのテーブル定義からGraphQL Schemaへの変換！ 変換後の自由なカスタマイズ！ GraphQL.jsができることは大抵できる！（型安全なラッパー） Relay, DataLoader, Auth, Validationなど必須機能は組み込み！
18. 結果
19. 結果 Prisma + GraphQLではそれなりの開発体験が得られるはずです 個人開発などゆるく試してもらえる機会があれば、 ぜひ宜しくおねがいします！IssueとかでFBいただけたら嬉しいです！ そして道家さん(上司)を説得するためにスターもください！
20. 最後に パーソルホールディングスを初めて聞いたと思いますが、自分が所属するエン ゲージメントプロダクト開発部は、新規プロダクト開発にフォーカスしたとても面 白い部署です。 万が一興味が湧いた方は、SlackでもTwitterでも何でもいいのでカジュアルに DMください！