如何让 useQueries 只获取一次？

Question

我正在使用 react-query 中的“useQueries”，因为我需要进行的查询有所不同； 可以是 2、3、4 等...

下面是 2 个查询的示例，一个用于“猫”，一个用于“狗”

  const [animalQueries, setAnimalQueries] = useState<string[]>([]);

  const animalsResponse = useQueries(
    animalQueries.map((animalQuery) => {
      return {
        queryKey: ["animal", animalQuery],
        queryFn: () => catRandom(animalQuery),
        enabled: !!animalQuery,
      };
    })
  );

  const handleOnSubmit = async () => {
    await setAnimalQueries(["cat", "dog"]);
  };

出于某种原因，当我输入 enable to,.animalQuery 时，它会不断重新获取，因为 'animalQuery' 为真。

对于react-query中的正常使用Query； 我通过重新获取 function 解决了这个问题：

  const { data, refetch } = useQuery(
    ["homePageSearchQuery", { recipeName }],
    () => searchRecipeByName(recipeName),
    { enabled: false }
  );

  const handleOnSearchSubmit = async (recipeSearch: RecipeSearch) => {
    await setRecipeName(recipeSearch.search);
    refetch();
  };

但我无法从“animalResponses”重新获取 function，因为这是一个数组。

Answer 1

出于某种原因，当我输入 enable to,.animalQuery 时，它会不断重新获取，因为 'animalQuery' 为真。

我不完全理解这个问题。 enabled设置将确保查询不会针对undefined的动物名称触发，因此如果您设置：

setAnimalQueries(["cat", undefined, "dog"]);

你会得到两个取物——一个是给猫的，一个是给狗的。

在您的示例中：

setAnimalQueries(["cat", "dog"]);

您还应该看到两次抓取 - 一次用于猫，一次用于狗。 这不是你所期望的吗？

但我无法从“animalResponses”重新获取 function，因为这是一个数组。

Array 中的每个项目都有一个refetch function 以便您可以手动重新获取狗或猫。 但这不应该是必需的，因为animalQuery是查询键的一部分，并且当键更改时 react-query 将始终重新获取。