useFetch+firestore

public.icon

$fetchは標準のHTTPリクエスト関数

useAsyncDataは非同期関数を包むことで、キャッシュ化してくれる

useFetchはuseAsyncData+$fetch

httpリクエストと同時に使う場合はuseFetchを使うといい

ここで以下の記事が沁みる

ここで改めて尽きない話題ではあるが、Easy VS Simpleについて考えてみよう

ソフトウェアの設計は常にトレードオフだ。どのような設計をするかは、何を作るかによる

今回の話題はまさにそれである。「useFetch」はEasyだが、「useAsyncData + $fetch」はシンプルだ

useFetchは非常にEasyなのだが、たまに困ることがある。例えば一度に複数のAPIを叩く場合にどうするか

今考えてた、クライアントサイドでfirestoreのデータを取得したい時に、useFetchだとAPIのリクエスト前提になってしまうため、使えない。しかし、useAsyncDataでは使える。

useAsyncData+firebaseSDKで行うfirestoreのキャッシュ戦略

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

既存の弊社PJを表した様子。

https://i.gyazo.com/9fa81b08248f81a6e53ef68c878b11d5.gif

useAsyncDataを使って、Firestoreへの読み取り処理を丸々キャッシュしているため、ページ遷移を行なってもデータは再利用される

これまでは、初回表示に全てのデータを表示し、それを再利用するために、単一ページでの実装を行なってきたが、キャッシュ戦略を適切に取ることで、ページ実装を行うことができる。

code:useData.ts

const fetchData = async () => {

console.log('fetchData', collectionName, conditions);

// 時間ログ

console.log(new Date().getTime())

let q = collection(db, collectionName);

// if (conditions) {

// q = query(q, ...conditions);

// }

const querySnapshot = await getDocs(q);

const data = querySnapshot.docs.map((doc) => ({

id: doc.id,

...doc.data(),

}));

console.log('DBにリクエストしました！', data);

return data;

};

const { data, pending, error, refresh } = useAsyncData(

fetchData,

{

server: false, // クライアントサイドのみで実行

// SEOに関係ないデータとかは遅延読み込みしたい

lazy: false, // 遅延読み込みしない

immediate: true, // 即時読み込み

getCachedData: (key) => {

// キャッシュされたデータを取得

const nuxtApp = useNuxtApp();

},

transform: (result) => {

// 必要に応じてデータを変換

return result;

},

dedupe: 'cancel', // 同じキーの重複リクエストをキャンセル

}

);