如何使用打字稿有条件地将useQuery放入react-query中答案

【问题标题】：how to put useQuery in react-query in conditionally using typescript如何使用打字稿有条件地将useQuery放入react-query中
【发布时间】：2021-09-08 11:55:02
【问题描述】：

我正在使用来自react-query 的useQuery 来获取我只希望查询在某些条件下运行的数据。我该如何使用它？以下是我使用useQuery的代码

  const query = useQuery<APIResponse, Error>(
    [{query: creatGQL, variables: variables}],
    async () => {
      const result: APIResponse = await ucFetch(apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          query: creatGQL,
          variables: variables,
        }),
      });
      return result;
    }  );
  return query;

【问题讨论】：

解决方案：stackoverflow.com/a/69760795/16983617 它对我有用。

标签： reactjs typescript react-query

【解决方案1】：

可以使用enabled 选项禁用/启用查询。如果是false，查询将不运行：

useQuery(key, queryFn, { enabled: myCondition }

条件可以是静态的，也可以由状态/道具驱动 - 任何真正的布尔值。

【讨论】：

我虽然启用参数只是为了确定是否应该在第一次组件渲染后运行查询..它不适用于像一旦组件已经渲染的情况，但不适用于组件渲染后 useState 变量更改的情况
不，事实并非如此。 enabled 可以随意启用或禁用查询。