Resolver example: Cursor based pagination (e.g. endless scrolling)

[Svarto]

Hi, I looked around and couldn't find an example of using cursor based pagination with URQL and resolver. The provided resolvers include simplePagination (offset based) and relayPagination (relay scheme based), and have pro's and con's. Further, the docs even say that these are "quick" resolvers to plug in, but for more robust pagination we are asked to code our own.

I struggled a lot pulling together a cursor based pagination, in my case based on date, e.g. "created_at", so want to showcase how I finally managed to do it AND hopefully get some nice feedback to further improve it. So far, it only handles date based cursors, e.g. created_at or updated_at.

My resolvers is HEAVILY based on the simplePagination one, so all credit goes to the URQL team to provide such an awesome library and open source it!!

cursorPagintation.js:

import { stringifyVariables } from "@urql/core";

export const cursorPagination = ({
  cursorArgument = "created_at",
  limitArgument = "limit",
  mergeMode = "after",
}) => {
  // This actually filters out the cache values that are relevant for the
  // current query that we are pulling
  const compareArgs = (fieldArgs, connectionArgs) => {
    for (const key in connectionArgs) {
      if (key === limitArgument) {
        continue;
      } else if (!(key in fieldArgs)) {
        return false;
      }

      // As we are not using offset anymore but a cursorArgument in
      // "where", we need to filter it out to compare which results to stitch together
      const argA = Object.fromEntries(
        Object.entries(fieldArgs[key]).filter(
          ([filterkey]) => !filterkey.includes(cursorArgument)
        )
      );

      const argB = Object.fromEntries(
        Object.entries(connectionArgs[key]).filter(
          ([filterkey]) => !filterkey.includes(cursorArgument)
        )
      );

      if (
        typeof argA !== typeof argB || typeof argA !== "object"
          ? argA !== argB
          : stringifyVariables(argA) !== stringifyVariables(argB)
      ) {
        return false;
      }
    }

    for (const key in fieldArgs) {
      if (key === limitArgument) {
        continue;
      }
      if (!(key in connectionArgs)) return false;
    }

    return true;
  };

  return (_parent, fieldArgs, cache, info) => {
    const { parentKey: entityKey, fieldName } = info;

    const allFields = cache.inspectFields(entityKey);
    const fieldInfos = allFields.filter(info => info.fieldName === fieldName);
    const size = fieldInfos.length;
    if (size === 0) {
      return undefined;
    }

    const existingItemsSet = new Set();
    let result = [];
    let endCursor = null;

    for (let i = 0; i < size; i++) {
      const { fieldKey, arguments: args } = fieldInfos[i];

      if (args === null || !compareArgs(fieldArgs, args)) {
        continue;
      }

      const fetchedItems = cache.resolve(entityKey, fieldKey);

      const currentCursor =
        args.where[cursorArgument]._lt || args.where[cursorArgument]._gt;

      // If the cache is empty (nothing to add to) OR
      // the currentCursor is not a number then STOP
      if (fetchedItems === null || fetchedItems.length === 0) {
        continue;
      }
      const newResult = [];

      for (let j = 0; j < fetchedItems.length; j++) {
        const fetchedItem = fetchedItems[j];

        // Only add uniquely new fetched items (due to the existingItems Set)
        if (existingItemsSet.has(fetchedItem)) continue;
        newResult.push(fetchedItem);
        existingItemsSet.add(fetchedItem);
      }

      if (
        (!endCursor || currentCursor < endCursor) ===
        (mergeMode === "after")
      ) {
        result = [...result, ...newResult];
      } else {
        result = [...newResult, ...result];
      }

      endCursor = currentCursor;
    }

    const hasCurrentPage = cache.resolve(entityKey, fieldName, fieldArgs);
    if (hasCurrentPage) {
      return result;
    } else if (!info.store.schema) {
      return undefined;
    } else {
      info.partial = true;
      return result;
    }
  };
};