Question

我已阅读有关查询失效的 react-query 文档。但是，它似乎对我不起作用。代码如下：

import React from "react";
import ax from "axios";
import { useQueryClient, useQuery } from "react-query";

export default function App() {
  const queryClient = useQueryClient();
  const [poke, setPoke] = React.useState("pikachu");
  
  const getPokemon = async (id) => {
    try {
      const pokemon = await ax.get("https://pokeapi.co/api/v2/pokemon/" + id);
      return pokemon;
    } catch (err) {
      throw new Error();
    }
  };

  const { data, isLoading, isError } = useQuery(
    ["get-pokemon", poke],
    () => getPokemon(poke),
    { cacheTime: 100000000 }
  );

  const getGengar = () => {
    ax.get("https://pokeapi.co/api/v2/pokemon/gengar").then((res) => {
      queryClient.invalidateQueries("get-pokemon");
    });
  };

  return (
    <>
      {isLoading && "loading"}
      {isError && "error"}
      {data && data.data.id}
      <button onClick={() => setPoke("pikachu")}>search pikachu</button>
      <button onClick={() => setPoke("ditto")}>search ditto</button>
      <button onClick={() => getGengar()}>search gengar</button>
    </>
  );
}

因此函数 getGengar() 应该使查询“get-pokemon”无效。再次按下“获取皮卡丘”按钮时，我应该会看到加载状态。但它的行为就像缓存仍然有效。如何解决这个问题？

Answer 1

来自 react-query 文档 - query invalidation。

<块引用>

当使用 invalidateQueries 使查询无效时，会发生两件事：

它被标记为stale。
如果当前正在通过 useQuery 或相关挂钩呈现查询，它也会在后台重新获取。

也在 important defaults 部分：

过时的查询在后台自动重新获取 有新活动（已安装查询实例、重新聚焦窗口、重新连接网络...）

概括地说，当您调用 invalidateQueries() 时，它会使所有匹配的查询 stale 和交互时的陈旧查询在后台再次获取。如果要显示加载状态，可以根据场景参考两种状态：

isLoading：第一次获取或查询缓存被垃圾回收后返回true（无缓存）。
isFetching：在后台重新获取时返回true。当有陈旧的缓存显示为占位符时发生。

const {
  isFetching, // returns true when in the fetching process
  isLoading, // returns true when in the fetching process AND no cache
  ...props,
} = useQuery(
  ["id", idQuery],
  fetchSomething
);

如何使用 React query v3 使缓存无效？

1 个答案: