useSWR+firestoreで読み取りをキャッシュする+自動更新

public.icon

Code:https://github.com/inoue2002/swr-firestore

まずpjの立ち上げ

https://gyazo.com/c19f42ec9c001eb866f1a9222b4f9054

https://i.gyazo.com/b67abf7a8ebc854de47aea7f0e94ca38.gif

元々、コンポーネントがレンダリングされるごとにリードが走っている

https://i.gyazo.com/797d4d34993c1f02effe468b949f0581.gif

これで初回のローディングだけでページ戻ってきた時にはキャッシュが適用されるようにした

revalidateIfStale: falseをつけた

code:Home.tsx

import { collection, getDocs } from 'firebase/firestore';

import { Link } from 'react-router-dom';

import useSWR from 'swr';

import { db } from './App';

const fetchRecipes = async () => {

const recipesCollection = collection(db, 'recipes');

const recipesSnapshot = await getDocs(recipesCollection);

console.log('DBへのREADが走りました');

return recipesSnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), name: doc.data().name }));

};

const Home = () => {

const {

data: recipes,

error,

isLoading,

} = useSWR('firestore/recipes', fetchRecipes, {

// refreshInterval: 3000, // 3秒ごとに自動更新

// revalidateOnFocus: false, // フォーカス時の再検証を無効化

// dedupingInterval: 2000, // 2秒間は重複リクエストを防ぐ

// revalidateOnReconnect: false, // 再接続時の再検証を無効化

revalidateIfStale: false, // ステール時の再検証を無効化

});

if (isLoading) return <div>ローディング</div>;

if (error) {

console.log(error);

return <div>エラーが発生しました</div>;

}

if (!recipes) return <div>読み込み中...</div>;

return (

<div>

<h1>レシピ一覧</h1>

{recipes.map((recipe) => (

<Link to="/about">{recipe.name}</Link>

</div>

))}

</div>

);

};

export default Home;