使用 RTK Query API 分页，当状态树中没有这样的查询键时，得到上一页的记录

Question

api:

export const feedsApi = createApi({
  reducerPath: 'feeds',
  tagTypes: ['Feeds'],
  baseQuery: fetchBaseQuery({
    baseUrl: 'http://localhost:5000',
  }),
  endpoints: (build) => ({
    getFeedsByPage: build.query<FeedType[], string>({
      query: (page = '1') => `feeds?_page=${page}`,
      providesTags: (feeds, error, arg) => {
        return feeds
          ? [
              ...feeds.map(({ id }) => ({ type: 'Feeds', id } as const)),
              { type: 'Feeds', id: 'LIST' },
            ]
          : [{ type: 'Feeds', id: 'LIST' }]
      },
    }),
  }),
})

组件：

const FeedsPaginationPage: React.FunctionComponent<
  FeedsPaginationPageProps
> = () => {
  const [query] = useSearchParams()
  const page = query.get('page') ?? '1'
  const { isLoading, data: feeds, isFetching } = useGetFeedsByPageQuery(page,{
    refetchOnMountOrArgChange: true
  })

  console.log('>>>', isLoading, feeds, isFetching, page)

  return (
    <>
      {isLoading ? (
        'loading'
      ) : (
        <>
          <button
            className="btn btn-link"
            onClick={() => navigate(`?page=${+page - 1}`)}
          >
            previous
          </button>{' '}
          <button
            className="btn btn-link"
            onClick={() => navigate(`?page=${+page + 1}`)}
          >
            next
          </button>
        </>
      )}
    </>
  )
}

即有 100 个供稿：

当我从页面<1> 访问页面<2> 时，我得到feeds 总是页面<1> 的数据数组（10 条记录），但在状态树中，显然有没有这样的数据。当调用useGetFeedsByPageQuery("2")时，feeds应该是未定义的，我不明白为什么。

Answer 1

钩子会在加载新数据时将以前的数据保留在 data 中，这样您就可以显示它而不会瞬间闪烁到空白屏幕。您始终可以检查 isFetching 以查看数据是否刚刚被获取并且显示的数据可能已过时，或者访问 currentData 而不是 data。

使用 RTK Query API 分页，当状态树中没有这样的查询键时，得到上一页的记录

Using RTK Query API paginate, got records of previous page, when there is no such query key in state tree

pagination

redux

rtk-query