在Apollo Client v3中,如果使用useQuery进行查询,查询结果默认情况下不会被缓存。这意味着每次进行查询时,都会触发网络请求,带来了性能上的负担。要解决这个问题,我们可以使用Apollo Client提供的一个选项:fetchPolicy。
fetchPolicy有四个可选项:
因此,我们可以在使用useQuery进行查询时,将fetchPolicy选项设置为cache-first或cache-and-network,以便查询结果可以被缓存:
import { useQuery, gql } from "@apollo/client";
const EXCHANGE_RATES = gql query GetExchangeRates { rates(currency: "USD") { currency rate } }
;
function ExchangeRates() { const { loading, error, data } = useQuery(EXCHANGE_RATES, { fetchPolicy: "cache-first", // 将fetchPolicy设置为cache-first或cache-and-network });
if (loading) return
Loading...
; if (error) returnError :(
;return data.rates.map(({ currency, rate }) => (
{currency}: {rate}
export default ExchangeRates;