# 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](https://dev.growi.org/63735c96c29dff4657eb78ca)

# カスタムメソッド

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

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

```typescript
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 });
};
```





---

## Page Navigation

- Canonical URL: https://dev.growi.org/資料/開発ガイドライン/SWRによるグローバルステート＆カスタムhooks
- Permalink: https://dev.growi.org/637355d1c29dff4657eb5e2d
- Parent: [開発ガイドライン](/5cff50c29f29ed003e5d2984.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 12 total
  - [ADR - Architecture Decision Record](/6522ae62c305143ea046a16e.md)
  - [Field制限に関するModel層での責務について](/5f3e0b4e21b23d00487da698.md)
  - [Modernize](/5f74fad16711480049ff1938.md)
  - [Mongooseメソッド](/5cff5ed49f29ed003e5d2987.md)
  - [Next.js 化](/5f7ad6de2906df004819a9af.md)
  - [PaginationWrapperを使いたい](/5d1dc3608c18400041e56649.md)
  - [USER_PUBLIC_FIELDS の扱いについて](/605016625ea133004833567e.md)
  - [i18n](/5eca4d8e7bc0b20049fd2760.md)
  - [デザイン規定とポリシー](/5ed49039abdc3e0048a2256d.md)
  - [モデルインターフェースのTypescript化](/61ea77b416b45b44403d246d.md)
  - [動作確認タスクの進め方](/5ee18e85615ff10048fac7a4.md)
  - [英語表記基準](/5cefa1ca927e6e003e203577.md)
- Last updated: 2022-11-15T09:33:03.828Z by yuki
- Full page listing (all children regardless of count): https://dev.growi.org/_api/v3/page-listing/children?id=637355d1c29dff4657eb5e2d