RTK Query中第二次调用personDataSend时isLoading不生效问题

问题核心：RTK Query的useLazyQuery默认会缓存请求结果，当传入相同参数发起第二次请求时，会直接返回缓存数据，不会触发新的网络请求，因此isLoading状态不会再次变为true。

以下是几种可行的解决办法：

• 强制每次请求都重新发起
  在调用getDriverLicenseByPin时，传入forceRefetch: true选项，强制跳过缓存触发新请求，这样每次点击都会更新isLoading状态：

  const personDataSend = (values) => {
    getDriverLicenseByPin({
      pin: values.Pin,
      driverLicenseNumber: values.DriverLicenseNumber,
    }, { forceRefetch: true });
  };
  

• 设置缓存立即失效
  在定义API切片时，给该查询配置keepUnusedDataFor: 0，让缓存数据立即失效，确保下次请求一定会重新发起：

  // 示例：API切片定义片段
  export const yourApiSlice = createApi({
    reducerPath: 'yourApi',
    baseQuery: fetchBaseQuery({ baseUrl: '/' }),
    endpoints: (builder) => ({
      getDriverLicenseByPin: builder.query({
        query: (params) => `/driver-license?pin=${params.pin}&number=${params.driverLicenseNumber}`,
        keepUnusedDataFor: 0, // 缓存立即过期
      }),
    }),
  });
  

• 手动调用refetch方法
  从useLazyQuery的返回值中解构出refetch方法，在触发查询后手动调用它来刷新请求：

  const [
    getDriverLicenseByPin,
    { data, isLoading, refetch },
  ] = useLazyGetDriverLicenseByPinQuery();
    
  const personDataSend = (values) => {
    getDriverLicenseByPin({
      pin: values.Pin,
      driverLicenseNumber: values.DriverLicenseNumber,
    });
    refetch();
  };
  

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