使用 RTKQuery 进行无限滚动

Question

我正在尝试使用 RTKQuery 实现无限滚动。我几乎做到了，但面临着缓存行为问题。当组件第一次渲染请求时，滚动工作正常，但如果我移动到另一个页面，然后返回，页面参数重置为 1（因为 useState），并且 rtk 缓存中已存在的响应数据将合并到当前缓存。这会导致键等问题。我尝试为serializeQueryArgs实现自定义函数，但我可能不完全理解它是如何工作的，因为在端点缓存在每个请求期间开始清理自身之后。卸载组件后如何清理端点缓存？

端点实现：

fetchUsers: build.query<UsersResponse, QueryParams>({
        query: params => ({ url: generateGetUsersUrl(params.page, params.size) }),
        serializeQueryArgs: ({ endpointName }) => {
          return endpointName
        },
        merge: (currentCache, newCache) => {
          currentCache.users.push(...newCache.users)
        },
        forceRefetch({ currentArg, previousArg }) {
          return currentArg?.page !== previousArg?.page
        },
        providesTags: res =>
          res?.users ? [...res.users.map(user => ({ type: "User" as const, id: user.id })), "Role"] : ["User", "Role"],
        transformResponse: (data: UsersDataFromBackend, meta) => ({
          users: usersTransformer(data),
          totalCount: Number(meta?.response?.headers.get("X-Total-Count"))
        })
      })

Answer 1

答案很简单。 QueryParams 可以在合并方法中使用：

fetchUsers: build.query<UsersResponse, QueryParams>({
        query: params => ({ url: generateGetUsersUrl(params.page, params.size) }),
        serializeQueryArgs: ({ endpointName }) => {
          return endpointName
        },
        merge: (currentCache, newCache, {args}) => {
          if(args.page === 1) currentCache.users = []
          currentCache.users.push(...newCache.users)
        },
        forceRefetch({ currentArg, previousArg }) {
          return currentArg?.page !== previousArg?.page
        },
        providesTags: res =>
          res?.users ? [...res.users.map(user => ({ type: "User" as const, id: user.id })), "Role"] : ["User", "Role"],
        transformResponse: (data: UsersDataFromBackend, meta) => ({
          users: usersTransformer(data),
          totalCount: Number(meta?.response?.headers.get("X-Total-Count"))
        })
      })```