膨らむ、でかコンポーネント。
どう切るか？

グローバルミューテーションを考える

グローバルとローカル

グローバルからローカルになる例を書いてみる。

1. どこからでも createPost したいので、useCreatePost を作る
2. createPost したら Post 一覧画面を更新したいので useListPosts の mutate を呼びたい
3. useCreatePost のなかにグローバルミューテーション useMutateListPosts 差し込んでしまえば mutation のことを考えなくて済むだろう
   • この時点で useMutateListPosts はグローバルミューテーションを提供する hooks になっている

const useCreatePost = () => {
  const mutateList = useMutateListPosts();
  const create = () => {
     post().then(() => mutateList());
  };

  return create;
};

しかしここで、useListPosts が複数の箇所で呼ばれることになり、呼ばれるところによって依存するものが変わるとする。
このとき useMutateListPost は依存関係を気にしていなかったので破綻する。

const useCreatePost = () => {
  const mutateList = useMutateListPosts(); // ❌ dependencies が必要だけど useCreatePost は知ることはできない

  ...
};

どうする？

分析する

そもそも上記で言っていた「グローバルミューテーション」は「mutate 対象がいようがいまいが mutate をどこからでも呼べる」というもの。
これは「mutate 対象がグローバルであること」を前提としているので、破綻して当然。
よって、useCreatePost からグローバルミューテーションを排除する。

const useCreatePost = () => {
  // const mutateList = useMutateListPosts();
  const create = () => {
     post()/* .then(() => mutateList()) */;
  };

  return create;
};

対応する

dependencies のスコープないで(ローカルで) mutate するように変えるしかないか？

const { mutate } = useListPosts(deps);

const create = useCreatePost();
create().then(() => mutate());

// 一覧ページとは全く関係がないので mutate の必要がそもそもない
const create = useCreatePost();

ここからさらに

もう少し useSWR の依存・状態について考えたい。
グローバルなものとローカルなものを分ける必要はあると思うけど、ベストなディレクトリ構造を考えたい。

• グローバルはわかりやすい
• この先はコンポーネントのディレクトリ構造を考えてから決まる

この先はいろんなプロジェクトのフォルダ構成見ながら考える感じになりそうだから、また今度戻ってくることにする