useSWR で setState する

frontend

2021.06.29

Next.js でハマったんですが、

useSWR で取得したデータをどうやって setState するか。

なんか普通にやっても、undefined の値が入るんですよ。

タイミングの関係で。

なんか、useSWR が終わるまでの値を setState しちゃうみたい。

じゃあ、どうするかっていうと。

getServerSideProps を使います。

これは、レンダリングが終わる前に実行される関数のようです。

import React, { useState } from "react";

export async function getServerSideProps(context) {
  const url = "http://localhost:3001/api/v1/messages";
  const res = await fetch(url);
  const data = await res.json();

  return { props: { data } };
}

function ChatRooms(props) {
  const [messages, setMeesages] = useState(props.data.messages);
  
  // 適当な処理
}

あ、結局 SWR 使ってないですね。

SWR 使って、こういう風に setState できないんでしょうか？

できるようになったら追記します。

SWR mutate とは

[日本語訳]SWR ドキュメンテーションミューテーション
https://qiita.com/tk1024/items/6f09916c49fc83d3b763

Mutation – SWR React Hooks library for data fetching
https://swr.vercel.app/docs/mutation

“SWR” という名前は、 HTTP RFC 5861 で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に最新のデータを持ってくるという戦略です。

SWR – データ取得のための React Hooks ライブラリ
https://swr.vercel.app/ja