如何更新queryParameters，让调用refetch时使用新参数？

要让refetch使用更新后的参数，核心是确保参数的响应式，或者直接给refetch传新参数，以下是两种可行方案：

方案一：用React状态管理参数，让query自动追踪变化 #

首先把startDate和stopDate存入React状态，这样修改它们时会触发组件重新渲染，useGetDataQuery会自动获取最新的参数，此时调用refetch就会用新值请求：

import { useState } from 'react';

// 用state管理日期参数
const [startDate, setStartDate] = useState('2024-05-16');
const [stopDate, setStopDate] = useState('2024-06-15');
// 生成响应式的query参数
const queryParameters = { id, startDate, stopDate };

const { refetch, isLoading, isFetching } = useGetDataQuery(queryParameters);

// 示例：修改日期后调用refetch
const updateDatesAndRefetch = () => {
  setStartDate('2024-06-01');
  setStopDate('2024-06-30');
  // 若配置了`enabled: false`禁止自动请求，可在状态更新后手动调用refetch
  setTimeout(() => refetch(), 0);
};

如果你的useGetDataQuery配置了enabled: false（禁止自动请求），参数更新后不会自动触发请求，此时调用refetch()就会使用最新的queryParameters。

方案二：调用refetch时直接传入新参数 #

如果不想把参数存入状态，或者需要临时用新参数请求，可以直接给refetch方法传入新的参数对象，它会覆盖当前的query参数：

const queryParameters = { id: id, startDate: '2024-05-16', stopDate: '2024-06-15' };
const { refetch, isLoading, isFetching } = useGetDataQuery(queryParameters);

// 示例：点击按钮用新参数重新获取
const handleManualRefetch = () => {
  const newParams = {
    id: id,
    startDate: '2024-06-01',
    stopDate: '2024-06-30'
  };
  refetch(newParams);
};

这种方式不需要修改原有的queryParameters，直接在调用refetch时传入临时参数即可。

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