NextjsのAPIルートを利用したGraphQLサーバーのYogaでmsw起点のサンプルを作ってみました～フォールバックUIを添えて～

こんにちわ。nap5です。NextjsのAPIルートを利用したGraphQLサーバーのYogaでmsw起点のサンプルを作ってみましたので、紹介したいと思います。

デモコードです。

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

silent-field-irnipv - CodeSandbox

デモサイトです。

タイトル未設定

MSWはこちらになります。

Mock Service Worker

GraphQLサーバーのYogaはこちらになります。

Home – GraphQL Yoga

前回の記事とも関連しています。

開発面だけMSWで割り込みして本番面はNextJSのAPIルートへ環境変数単位でフォールバック取れるのはいい感じなワークアラウンドだと思いました。

また、レスポンスタイムを宣言的に遅延できるオプションはハンディだと思いました。

delay() - Api

簡単ですが、以上です。