无限滚动并使用RTK查询重复结果进行搜索

问题描述 投票:0回答:1

我正在尝试通过搜索实现帖子的无限滚动页面。它与 Reddit JSON API 配合使用。 没有常识中的分页。 Reddit api 返回列表。列表 JSON 响应包含 after 字段,该字段相当于网站上的“下一个”按钮,与 count 结合可用于对列表进行分页。因此,第一个请求是在没有 after 参数的情况下发出的,并且以下所有请求都包含 'after' 以及来自先前服务器响应的 if 。 当我更改搜索请求时,我会清理之后的状态。

这是我的 rtk api:

export const postsAPI = createApi({
  reducerPath: 'posts/api',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://www.reddit.com/',
  }),
  endpoints: build => ({
    getPosts: build.query<ITransformedPosts, { limit?: number, searchParam?: string, after?: string }>({
      query: ({ limit = 8, after, searchParam }) => ({
        url: searchParam ? 'search.json' : '.json',
        params: {
          limit,
          ...(after && { after }),
          ...(searchParam && { q: searchParam })
        }
      }),
      serializeQueryArgs: ({ endpointName, queryArgs }) => { return queryArgs.searchParam || endpointName },
      merge: (currentCache, newItems) => {
        currentCache.posts.push(...newItems.posts)
        currentCache.after = newItems.after
        currentCache.hasMore = newItems.hasMore
      },
      forceRefetch({ currentArg, previousArg }) {
        return currentArg !== previousArg
      },
      transformResponse: (response: IPosts) => ({ posts: response.data.children, 
after: response.data.after })
    }),

它工作正常,除了一个错误。如果我发出搜索请求并随后发出相同的请求,则新数据将与之前的数据连接起来。所以有双倍的帖子。

有没有机会说 rtk:“嘿 rtk,如果特定请求有数据,首先返回现有数据。并且仅当我使用新的“after”参数发送相同的请求时才连接新数据。

reactjs infinite-scroll rtk-query
1个回答
0
投票

你找到解决方案了吗,因为我面临着同样的问题

© www.soinside.com 2019 - 2024. All rights reserved.