GraphQLサーバーのYogaを使ったNextjsプロジェクトを作成してみました

こんにちわ。nap5です。GraphQLサーバーのYogaを使ったNextjsプロジェクトを作成してみましたので、紹介したいと思います。

デモコードです。

pensive-blackburn-uunr20 - CodeSandbox

デモサイトです。

タイトル未設定

このスレが参考になりました。

Convert GraphQL query to string with typename

自動生成されたクエリをデシリアライズするやり方は以下で達成できます。

import {print} from 'graphql';
import {GetUsersAndTeamsDocument } from '@/graphql/dist/generated-client';
const parsedQuery = print(GetUsersAndTeamsDocument);

これさえできれば、あとはなんとかなるでしょう。

こちらのブログが参考になりました。

Next.js で始める GraphQL - 30歳からのプログラミング

ファイルアップロードをyogaで達成するやり方は以前の記事でも紹介したので、こちらと合わせれば、RESTと併用せずともYogaでエンドポイントは統一できたりしますかね。

簡単ですが、以上です。