TypeScript中如何条件触发react-query的useQuery查询请求

react-query 的 useQuery 支持传入第三个配置参数，通过其中的enabled属性即可控制查询是否自动执行，该属性值为布尔类型，只有值为true时才会触发查询请求。

修改后的示例代码 #

假设你的触发条件为shouldFetch（可替换为实际业务判断逻辑）：

// 业务触发条件示例：仅当variables中的id存在时才执行查询
const shouldFetch = !!variables.id;

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;
  },
  // 新增控制查询的配置项
  {
    enabled: shouldFetch
  }
);
return query;

注意事项 #

• 当enabled为false时，查询不会自动触发，也不会进入加载状态、不会抛出请求错误
• 若需要在enabled为false的场景下手动触发查询，可以调用返回值里的query.refetch()方法主动拉取数据
• enabled值从false切换为true时，会自动触发查询（无缓存或缓存已失效的场景下）

内容的提问来源于stack exchange，提问作者jacobcan118