使用RTK（Redux-Toolkit）无限滚动

Question

我正在努力通过光标分页来实现无限滚动的全部支持，增加了新的元素和删除。我使用了GitHub讨论中的一个很好的例子根据我的要求，很少进行调整。这是我实现 useinfinitequery 。

export function useInfiniteQuery<
  ListOptions,
  ResourceType,
  ResultType extends IList<ResourceType> = IList<ResourceType>,
  Endpoint extends QueryHooks<
    QueryDefinition<any, any, any, ResultType, any>
  > = QueryHooks<QueryDefinition<any, any, any, ResultType, any>>,
>(
  endpoint: Endpoint,
  {
    options,
    getNextPageParam,
    select = defaultSelect,
    inverseAppend = false,
  }: UseInfiniteQueryOptions<ListOptions, ResultType, ResourceType>,
) {
  const nextPageRef = useRef<string | undefined>(undefined);
  const resetRef = useRef(true);
  const [pages, setPages] = useState<ResourceType[] | undefined>(undefined);
  const [trigger, result] = endpoint.useLazyQuery();

  const next = useCallback(() => {
    if (nextPageRef.current !== undefined) {
      trigger(
        { options: { ...options, page_after: nextPageRef.current } },
        true,
      );
    }
  }, [trigger, options]);

  useEffect(() => {
    resetRef.current = true;
    trigger({ options }, true);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, Object.values(options));

  useEffect(() => {
    if (!result.isSuccess) {
      return;
    }
    nextPageRef.current = getNextPageParam(result.data);
    if (resetRef.current) {
      resetRef.current = false;
      setPages(select(result.data));
    } else {
      setPages((pages) =>
        inverseAppend
          ? select(result.data).concat(pages ?? [])
          : (pages ?? []).concat(select(result.data)),
      );
    }
  }, [result.data, inverseAppend, getNextPageParam, select, result.isSuccess]);

  return {
    ...result,
    data: pages,
    isLoading: result.isFetching && pages === undefined,
    hasMore: nextPageRef.current !== undefined,
    next,
  };
}

这个示例在分页方面非常有用，但是当我尝试添加新元素时，问题。我无法区分新元素是从新的分页批处理到达的，或者我打电话给突变和无效的标签（在这种情况下为RTK Refetch Refetch当前订阅和update result.data 我'm在第二使用中聆听。

我需要以某种方式确定何时需要附加新的到达数据（如果下一个分页）或完全替换（如果何时调用突变并需要重置光标并滚动到顶部/底部）。

我的调用突变并获取放置在不同组件中的数据。我试图在调用突变并需要重置数据时使用 fixed cachekey 进行侦听，但是当我需要在不同的地方重复使用突变时，我很快就会面临很多重复和问题，但是请保持相同修复了缓存键。

有人有一个想法如何完成？也许，我需要使用 useInfiniteQuery 实现或为当前实现提供一些修复程序。但是我不知道处理这种情况。谢谢！