GROWI に於ける SWR の使い方

1. 一般的な Stale-While-Revalidate としての利用
2. グローバルステートとしての利用
3. カスタムhook (サービス層) としての利用

このうち、このページでは主に 2, 3 について記述する

基本ルール

useSWR や useSWRImmutable をそのまま使うことはせず、それをラップするカスタムhookを /stores 下に実装し、Next Page や各コンポーネントからはそちらを利用する

グローバルステート

まずは 歴史の勉強として https://dev.growi.org/5f74fad16711480049ff1938#SWR%20化 を読もう。

コンテキスト(Context)

GROWI では一般的に一度のページ遷移(ブラウザのページ遷移によるもの、Next Routingによるもの両方)で getServerSideProps が走るが、そこから次の getServerSideProps が走るまでの期間のことを「コンテキスト(Context)」表現することとする

宣言

• 現在のコンテキストの状態は /stores/context.tsx で管理する
• useContextSWR のラッパーを実装する

利用

• 引数有り
  • 初期化を伴うので利用する際は必ず Next Page から
• 引数なし
  • どこからでも可
  • また、mutate メソッドは使えないようになっている

その他の用途

宣言

• useStaticSWR のラッパーを実装する

利用

• 引数有り
  • 初期化を伴うので利用する際は Next Page 推奨
• 引数なし
  • どこからでも data 読み取りおよび mutate 可

参考ページ

• /資料/内部仕様/SWR Utilities

カスタムメソッド

例えば SWR で扱うデータの更新処理を実装するような場合、「関心の分離」の観点からデータ取得を担う SWR カスタム hook と同じ場所で実装するのが望ましい

実装例

@growi/core から SWRResponseWithUtils, withUtils を import し、SWRResponse に任意のメソッドを付けて更新メソッドを提供する

import { SWRResponseWithUtils, withUtils } from '@growi/core';

type Util = {
  update(updateData: any): Promise<void>
};

export const useSWRxGlobalNotification = (globalNotificationId: string): SWRResponseWithUtils<Util, any, Error> => {
  const swrResult = useSWRImmutable(
    ...
  );


  const update = async(updateData: IGlobalNotification) => {
    // invoke API
    ...
  };

  return withUtils<Util, any, Error>(swrResult, { update });
};