有没有办法获取 api 切片 [RTK 查询] 中存储的所有响应？

Question

这是根据页面返回数据的钩子

    const {
        data,
        isFetching,
        isLoading,
        isError,
    } = useGetResourceQuery(page, perPage );

这是 API

    export const api = createApi({
        baseQuery: fetchBaseQuery({
            baseUrl: "http://localhost:3001",
        
        }),
        tagTypes: ["resource"],
        endpoints: (build) => ({
            getResource: build.query({
            query: (page = 1, perPage = 20) =>
                `resource?spage=${page}&limit=${perPage}`,
            }),
        }),
    });
    export const {useGetResourceQuery} = api

有什么方法可以提取所有查询的状态吗？我想实现基于滚动的分页（无限滚动）需要更新中间件吗？或者有什么方法可以访问状态并将其公开为上面的函数，我浏览了文档但找不到解决方案

我可以使用本地状态并将它们连接起来，但想知道是否可以使用 RTK

谢谢

Answer 1

我认为大多数实现都使“无限滚动”的问题变得过于复杂。您可以通过退一步思考您真正需要什么来实现这一目标：

• 当前视图中的数据
• 一些额外的数据进入我们滚动的方向

由于我们很懒并且不想跟踪我们滚动到的方向，所以假设

• 当前视图中的数据
• 两个方向上都有一些额外的数据。

另外，我们假设查询返回如下响应

  {
    offset: 50,
    items: [...]
  }

因此，假设一个页面足够大，可以包含屏幕上的所有数据，我们最终会得到类似的结果

const currentPage = // something calculated from ScrollPosition

const lastResult = usePageQuery(currentPage - 1, { skip: currentPage === 1 }) // don't fetch pages before 0
const currentResult = usePageQuery(currentPage)
const nextResult = usePageQuery(currentPage + 1)

const combined = useMemo(() => {
  const arr = new Array(pageSize * (currentPage + 1))
  for (const data of [lastResult.data, currentResult.data, nextResult.data]) {
    if (data) {
      arr.splice(data.offset, data.items.length, ...data.items)
    }
  }
  return arr
}, [pageSize, currentPage, lastResult.data, currentResult.data, nextResult.data])

// work with `combined` here

由于组件未引用的请求将在存储中保留 60 秒，因此用户可以快速向上滚动多个页面而无需进一步请求 - 而且，可能永远不会再次滚动到的数据将从缓存中删除，并且只需在必要时重新获取即可。

Answer 2

从 RTK v1.9 开始，您现在可以使用该merge选项来合并多个查询的数据。这对于无限滚动之类的事情特别有用。请查看我在另一个问题上发布的答案以获取更多信息。

createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (build) => ({
    listItems: build.query<string[], number>({
      query: (pageNumber) => `/listItems?page=${pageNumber}`,
      // Only have one cache entry because the arg always maps to one string
      serializeQueryArgs: ({ endpointName }) => {
        return endpointName
      },
      // Always merge incoming data to the cache entry
      merge: (currentCache, newItems) => {
        currentCache.push(...newItems)
      },
      // Refetch when the page arg changes
      forceRefetch({ currentArg, previousArg }) {
        return currentArg !== previousArg
      },
    }),
  }),
})

Answer 3

您可以使用queryFn它来组合已有的缓存结果。记住使用invalidation来获取更新的状态。

在下面的代码中，第一个queryFn只是一个假API，第二个端点是您正在寻找的解决方案：

export const songsApi = createApi({
  reducerPath: "songsApi",
  baseQuery: fetchBaseQuery(),
  endpoints: (builder) => ({
    getSongs: builder.query<Result<Song>, { offset: number; limit: number }>({
      queryFn: ({ offset, limit }) => {
        let list: Song[] = [];
        for (let i = offset; i < offset + limit; i++) {
          list.push({ id: i.toString(), name: `Song ${i}` });
        }
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              data: {
                total: 100,
                list
              } as Result<Song>
            });
          }, 1000);
        });
      }
    }),
 
    getAllSongs: builder.query<Result<Song>, void>({
      queryFn: (_, { getState }) => {
        let state = getState();
        let songs: Song[] = [];
        for (let offset = 0; offset < 100; offset += 10) {
          const { data } = songsApi.endpoints.getSongs.select({
            offset,
            limit: 10
          })(state as any);
          if (data && data.list) {
            songs.push(...data!.list);
          }
        }
        return Promise.resolve({ data: { total: 100, list: songs as Song[] } });
      }
    })
  })
});

interface Result<T> {
  total: number;
  list: T[];
}