こんにちわ。nap5です。今回は小ネタです。

GraphQLでのマルチパートフォームの送信処理をハンディにハンドリングできるYogaというものがあったので、試してみてできたので、その際に参考にしたリンクをまとめてみました。

nextjsのAPIルートでYogaGraphQLサーバーをサーブしてクライアントからファイルアップロードするとできました。apolloとかだと苦しい感じがあったので、yoga便利だなと思いました。

ファイルアップロード以外はGraphQLに寄せてもいいかと考えていました。GraphQLでのファイルハンドリングが煩雑なので、RestAPIでいいと思っていましたが、Yogaライブラリを使えば、そこのボトルネックは解消されて実践投入できそうな感触はありました。ファイル上限サイズ等などの細かい制限はかかってくるとは思いますが、中身はGraphQLで実はPOSTしてたみたなAPIが一つ潜んでいてもいいんじゃないかと思いました。

useSWRでGraphQLを使用する際のハンドリング方法について

https://stackoverflow.com/questions/65480752/swr-with-graphql-request-how-to-add-variables-in-swr/65562706#65562706

Yogaを使ったファイルアップロードのハンドリングについて

https://the-guild.dev/graphql/yoga-server/docs/features/file-uploads

YogaをNextjsに組み込む際の設定について

https://the-guild.dev/graphql/yoga-server/docs/integrations/integration-with-nextjs

NextjsにYogaライブラリを組み込んだデモコード

https://github.com/dotansimha/graphql-yoga/tree/main/examples/nextjs

GraphQLをクラウドでサーブしてくれるWeb（Webソケットでローカルホストのエンドポイントともつなげてくれるぽい）

https://altairgraphql.dev/

GraphQLでのマルチパートフォームのハンドリング仕様について

https://github.com/jaydenseric/graphql-multipart-request-spec

そもそものマルチパートフォームについて
https://developer.mozilla.org/ja/docs/Web/API/FormData/Using_FormData_Objects

デモコードです。

https://codesandbox.io/s/numfjt?file=/README.md

デモサイトです。

https://react-nextjs-typescript-tailwind-graphql-multipart-5xtlebdlw.vercel.app/