满足间隔时间时查询轮询未获取数据

Question

我一直在使用 Redux-Toolkit Query 并尝试使用我拥有的 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 });