React Redux Take Kit 轮询在满足间隔时间时未获取数据

Question

一直在使用 React Redux 工具包，并尝试使用我拥有的 api 调用进行轮询。我几乎从他们拥有的文档中复制了一份并将其放入我的项目中。我的项目中的 Pokemon 测试版运行得很好。然而，当我添加我的 api 或像下面列出的狗 api 这样的 API 时。我接收并显示 JSON 信息，但当满足间隔时间（3、10 秒）时，不会更新或获取任何内容，组件背景不会更改，信息也不会更新。

我添加了手动刷新按钮，效果很好。

我查看网络选项卡，看到的只是一个请求，之后什么也没有。

这是文档工作示例的链接。 RTK 轮询 Pokemon 演示

如果我缺少任何代码，请告诉我，我一定会发布它。

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)
})

布局.tsx

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

测试组件.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>          
  )

Answer 1

设置/指定查询轮询间隔是查询

options

对象的一部分，第二参数传递给查询挂钩，位于

args

参数之后。

签名

type UseQuery = (
  arg: any | SkipToken,
  options?: UseQueryOptions, // <--
) => UseQueryResult

type UseQueryOptions = {
  pollingInterval?: number // <--
  skipPollingIfUnfocused?: boolean
  refetchOnReconnect?: boolean
  refetchOnFocus?: boolean
  skip?: boolean
  refetchOnMountOrArgChange?: boolean | number
  selectFromResult?: (result: UseQueryStateDefaultResult) => any
}

更新您的查询挂钩调用以在查询选项中传递

pollingInterval

。由于

getDogs

端点不消耗任何参数，因此将

undefined

作为查询

args

值传递。

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