Redux-Toolkit Query轮询到时间未自动获取数据问题

使用Redux-Toolkit Query实现API轮询功能时，Pokemon测试接口轮询正常，但切换到自定义API或Dog API时，首次能获取并展示JSON数据，但到达轮询间隔（3秒、10秒）时，既无新请求发起，组件背景也未变化，数据未更新。手动刷新按钮功能正常，网络面板仅显示首次请求。

相关代码 #

apiSlice.ts #

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const dogsApi = createApi({ 
  reducerPath: 'dogsApi', 
  baseQuery: fetchBaseQuery({ baseUrl: 'https://dog.ceo/api/breeds/image/' }), 
  endpoints: (builder) => ({ 
    getDogs: builder.query({
      query: () => 'random', 
    })         
  })
})

export const { useGetDogsQuery } = dogsApi

store.ts #

export const store = configureStore({ 
  reducer: {           
    [dogApi.reducerPath]: dogApi.reducer, 
  }, 
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware()
      .concat(dogApi.middleware)
})

layout.tsx #

<Provider store={store}>
  {children}
</Provider>

TestComponent.tsx #

const [pollingInterval, setPollingInterval] = React.useState(3000)

const {
  data: doggie,
  error,
  isLoading,
  isFetching,
  refetch
} = useGetDogsQuery({pollingInterval})

return (
  <div
    style={{
      float: 'left',
      textAlign: 'center',
      ...(isFetching ? { background: '#e6ffe8' } : {}),
    }}
  >
    {error
      ? (<>Oh no, there was an error loading Notices</>) : isLoading
      ? (<>Loading...</>)
      : doggie
        ? (
        <>        
          <h3>Notice Name</h3>
          <div>
            <p>There is and image here</p>
            <div style={{ minWidth: 96, minHeight: 96 }}>
              <img
                src={doggie.message}
                alt={'doggie'}
                style={{ ...(isFetching ? { opacity: 0.3 } : {}) }}
              /> 
            </div>
          </div>
          <div>
            <p>label here</p>
            <p>Select here for intervals</p>
          </div>
          <div>
            <p>There is a button here</p> 
            <label style={{ display: 'block' }}>
              Polling interval {pollingInterval}
            </label>
            
            <button onClick={refetch} disabled={isFetching}>
              {isFetching ? 'Loading' : 'Manually refetch'}
            </button>
            <div>{JSON.stringify(doggie)}</div>
          </div>
        </>  
      ) : ('No Data')
    }
  </div>          
)

问题源于两处错误：

1. 轮询参数传递方式错误
   RTK Query中，pollingInterval是钩子的配置选项，不是查询参数。由于你的getDogs接口不需要查询参数，需将pollingInterval作为第二个参数传入：

const {
  data: doggie,
  error,
  isLoading,
  isFetching,
  refetch
} = useGetDogsQuery(undefined, { pollingInterval })

2. store中API实例命名不一致
   apiSlice.ts导出的是dogsApi，但store.ts中误用了dogApi（少了s），导致reducer和中间件未正确挂载。修正后：

import { dogsApi } from './apiSlice'

export const store = configureStore({ 
  reducer: {           
    [dogsApi.reducerPath]: dogsApi.reducer, 
  }, 
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware()
      .concat(dogsApi.middleware)
})

修正后，轮询会按设定间隔自动发起请求，isFetching状态也会正常更新，触发组件背景样式变化。

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