【React / Next】postした後に、SWRでfetchして表示している部分を更新させたい

個人的な備忘録です。

やりたいこと

• モーダルなどで記事をpostした後に、後ろで表示されている一覧を更新させたい

環境

• React: 17.0.2
• Next: 11.1.3
• @chakra-ui/react: ^1.8.5

解決方法

• submit ボタンを押した時に post して、そのpost後に submit メソッド内で SWR の mutate を呼ぶ
• もし props で渡す場合、 refresh={() => mutate()} などとして渡す

サンプルコード

親

const { data, error, mutate } = useSWR(~~~);

<Modal
  refresh={() => mutate()}
/>

子

interface Props {
  refresh: () => Promise<HogeResponse | undefined>
}

export const Modal = ({ refresh }) => {
  const submitHandler = async () {
    // 省略 await
    refresh();
    onClose();
  }
}

参考