如何在修改查询参数时重新获取Redux-Toolkit Query数据？

RTK Query的useGetPokemonQuery这类自动查询hook，是通过传入的参数作为缓存键来管理请求的。refetch方法确实只能用当前已有的参数重新发起请求，无法修改参数。要实现修改参数并重新获取数据，正确的做法是将查询参数维护在组件的状态中，通过更新状态来触发hook自动发起新请求。

具体实现代码 #

import { useState } from 'react';
import { useGetPokemonQuery } from './services/pokemonApi';

function PokemonList() {
  // 将查询参数存在组件状态中
  const [queryParams, setQueryParams] = useState({
    pageNo: 1,
    search: "Pikachu"
  });

  // 直接传入状态中的参数，参数变化时自动重新请求
  const { data } = useGetPokemonQuery(queryParams);

  // 点击下一页的处理函数
  const handleNextPage = () => {
    setQueryParams(prev => ({
      ...prev,
      pageNo: prev.pageNo + 1
    }));
  };

  return (
    <div>
      {/* 渲染数据 */}
      <button onClick={handleNextPage}>下一页</button>
    </div>
  );
}

原理说明 #

• 当你更新queryParams状态时，useGetPokemonQuery会检测到参数变化，自动取消之前未完成的请求，并使用新参数发起新的GET请求。
• 这种方式完全符合RTK Query的设计逻辑：它会根据参数的不同维护独立的缓存条目，同时自动处理请求的触发和缓存管理。

额外场景：手动触发请求（非自动） #

如果你的需求是不希望参数变化时自动请求，而是需要手动触发（比如用户点击"搜索"按钮才发起请求），可以使用useLazyQuery替代：

import { useState } from 'react';
import { useLazyQuery } from '@reduxjs/toolkit/query/react';
import { getPokemon } from './services/pokemonApi';

function PokemonSearch() {
  const [pageNo, setPageNo] = useState(1);
  const [searchTerm, setSearchTerm] = useState("Pikachu");
  const [triggerGetPokemon, { data }] = useLazyQuery(getPokemon);

  const handleNextPage = () => {
    const newPage = pageNo + 1;
    setPageNo(newPage);
    // 手动传入新参数触发请求
    triggerGetPokemon({ pageNo: newPage, search: searchTerm });
  };

  return (
    <div>
      <button onClick={handleNextPage}>下一页</button>
    </div>
  );
}

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