使用 RTK Query API 分页，当状态树中没有该查询键时，获取上一页的记录答案

【问题标题】：Using RTK Query API paginate, got records of previous page, when there is no such query key in state tree使用 RTK Query API 分页，当状态树中没有该查询键时，获取上一页的记录
【发布时间】：2022-01-28 23:49:49
【问题描述】：

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 个供稿：

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

【问题讨论】：

标签： redux pagination rtk-query

【解决方案1】：

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

【讨论】：

谢谢！ currentData这就是我需要的！