7

新しいプロジェクトで反応クエリを使用し、小さな問題があります。要件は、データが読み込まれる前に空のページに読み込み中のスピナーを表示し、ユーザーが別のクエリで新しい結果を取得して以前の結果の上にスピナーを表示することです。

最初のケースは非常に簡単で、十分に文書化されています。

  const { isLoading, error, data } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading) return <p>Loading...</p>;

  return <div>{data.map((item) => <ListItem key={item.id} item={item}/></div>

しかし、2番目のケースを理解できません-クエリがreact-queryを変更した後、新しい結果のフェッチを行い、useQueryからのデータが空であるため、デフォルトの空の配列を取得し、その場合はその条件に該当します-if (isLoading && !data.length )

  const { isLoading, error, data=[] } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading && !data.length ) return <p>Loading...</p>;

  return <div>
    {data.map((item) => <ListItem key={item.id} item={item}/>
    {isLoading && <Spinner/>}
  </div>
4

2 に答える 2

15

キャッシュがない場合 (最初のクエリ フェッチまたは 5 分間のガベージ コレクターの後)、isLoading は true から false に切り替わります (ステータス === "loading")。

ただし、すでにキャッシュにデータがあり、再フェッチする (または他のコンポーネントでクエリを使用する) 場合、useQuery は以前にキャッシュされたデータを返し、バックグラウンドで再フェッチする必要があります。その場合、isLoading は常に false ですが、true から false に切り替える小道具「isFetching」があります。

あなたの例では、配列に渡された変数「クエリ」が呼び出し間で異なる場合、結果がないのは正常です。キャッシュ キーは、配列上のすべての変数で構築されます。

const query = "something"
const { isLoading, error, data } = useQuery(["list",query], () =>
    fetch(`https://api/list/${query}`)
  );

const query = "somethingElse"
const { isLoading, error, data } = useQuery(["list",query], () =>
    fetch(`https://api/list/${query}`)
  );

その場合、useQuery ごとに「クエリ」が異なるため、キャッシュは共有されません。

于 2020-06-30T08:32:08.250 に答える