更改查询参数时如何重新获取

Question

我正在使用 Redux-Toolkit 查询，并且在调用 GET API 时传递参数。如果我想重新获取并更改查询参数以传递，我该怎么做？目前我在文档中看到您只能调用 refetch 方法，但它不接受参数。

const { data, refetch } = useGetPokemonQuery({ pageNo: 1, search: "Pikachu" });

// Click next page:
refetch() // How can i pass next page no

Answer 1

返回的

refetch

函数仅重新获取，即重新触发查询，使用与上次调用查询相同的当前参数。您将需要更新传递给查询的

pageno

参数，这将触发查询端点。

基本示例：

const [pageNo, setPageNo] = React.useState(1);

...

const { data } = useGetPokemonQuery({ pageNo, search:"Pikachu" });

...

const nextPage = () => setPageNo(page => page + 1);

...

<button type="button" onClick={nextPage}>Next Page</button>

另一种方法是使用惰性查询挂钩，它返回您将参数传递给的触发器函数。

示例：

const pageNoRef = React.useRef(1);

...

const [trigger, { data }] = useLazyGetPokemonQuery();

React.useEffect(() => {
  // Initial request when component mounts
  trigger({ pageNo: pageNo.current, search:"Pikachu" });
}, []);

...

const nextPage = () => {
  pageNoRef.current++;
  trigger({ pageNo: pageNo.current, search:"Pikachu" });
};

...

<button type="button" onClick={nextPage}>Next Page</button>