如何控制RTK Query请求触发时机？解决Next.js挂载时自动请求问题

RTK Query默认的useQuery hook会在组件挂载时自动发送请求，要实现手动触发（比如点击按钮时），只需换成**useLazyQuery** hook即可，这是官方推荐的手动触发请求方案。

具体操作步骤： #

1. 替换hook：把组件中原来的useQuery替换成useLazyQuery
2. 获取触发函数：useLazyQuery会返回一个触发请求的函数（通常命名为trigger）和相关状态（加载中、数据、错误等）
3. 绑定触发事件：在按钮的点击事件中调用这个trigger函数，按需传递请求参数

代码示例 #

原自动请求写法（挂载即触发）

import { useGetPostsQuery } from '../services/api';

function SearchComponent() {
  // 组件挂载时自动发送请求
  const { data, isLoading } = useGetPostsQuery({ keyword: 'default' });

  return (
    <div>
      <p>加载状态：{isLoading ? '加载中' : '已完成'}</p>
    </div>
  );
}

修改为手动触发的写法

import { useLazyGetPostsQuery } from '../services/api';

function SearchComponent() {
  // 不会自动发送请求，返回触发函数trigger和状态
  const [triggerGetPosts, { data, isLoading, error }] = useLazyGetPostsQuery();

  const handleSearch = () => {
    // 点击按钮时手动触发请求，传递参数
    triggerGetPosts({ keyword: '用户输入的关键词' });
  };

  return (
    <div>
      <button onClick={handleSearch} disabled={isLoading}>
        {isLoading ? '搜索中...' : '搜索'}
      </button>
      {error && <p>搜索出错：{error.message}</p>}
      {data && <ul>{data.map(post => <li key={post.id}>{post.title}</li>)}</ul>}
    </div>
  );
}

注意事项 #

• useLazyQuery返回的状态（isLoading、data、error）和useQuery完全一致，可沿用原来的状态处理逻辑
• 触发请求时若需更新参数，直接在trigger函数中传递最新参数即可
• 若要实现“非挂载触发，但满足特定条件时自动触发”（比如路由参数变化），可通过useEffect调用trigger函数实现

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