如何在React组件外部使用TanStack React Query执行查询？

方法1：通过enabled选项控制执行时机 #

useQuery自带enabled参数，设为false时会阻止组件加载时自动执行查询。你可以用状态变量控制这个参数，在特定事件触发时将状态改为true，触发查询执行。

示例代码：

import { useState, useQuery } from '@tanstack/react-query';

// 组件内
const [shouldFetch, setShouldFetch] = useState(false);

const getSurvey = useQuery(["survey"], () =>
  getSurveyData({
    page: 1,
    userLangCode: langCode,
    sortColumnName: "Date",
    sortColumnOrder: "DESC",
    country,
    ip,
  }),
  { enabled: shouldFetch } // 初始不执行
);

// 特定事件触发时（比如按钮点击、状态变更）
const handleTriggerEvent = () => {
  setShouldFetch(true);
};

方法2：调用refetch手动触发查询 #

先通过enabled: false禁用自动执行，然后利用useQuery返回的refetch方法，在特定事件的回调中手动调用它来触发查询。

示例代码：

import { useQuery } from '@tanstack/react-query';

// 组件内
const getSurvey = useQuery(["survey"], () =>
  getSurveyData({
    page: 1,
    userLangCode: langCode,
    sortColumnName: "Date",
    sortColumnOrder: "DESC",
    country,
    ip,
  }),
  { enabled: false } // 初始不执行
);

// 特定事件触发时
const handleTriggerEvent = () => {
  getSurvey.refetch();
};

方法3：通过动态查询键触发执行 #

如果特定事件会伴随某个参数的变化，可以把该参数加入查询键。初始时给参数设一个不会触发查询的默认值，事件触发时更新参数，useQuery会因为查询键变化自动执行新的查询。

示例代码：

import { useState, useQuery } from '@tanstack/react-query';

// 组件内
const [triggerFlag, setTriggerFlag] = useState(null);

const getSurvey = useQuery(["survey", triggerFlag], () =>
  getSurveyData({
    page: 1,
    userLangCode: langCode,
    sortColumnName: "Date",
    sortColumnOrder: "DESC",
    country,
    ip,
  }),
  { enabled: !!triggerFlag } // 仅当triggerFlag存在时执行
);

// 特定事件触发时
const handleTriggerEvent = () => {
  setTriggerFlag(Date.now()); // 更新查询键，触发查询
};

注意：useQuery是React Hook，必须遵循Hook规则，只能在组件或自定义Hook的顶层调用，无法直接在组件外部使用。以上方法都保持在组件内调用useQuery，同时满足仅在特定事件触发执行的需求。

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