Inward relayPagination with separate alised forward and backward subfields

[zachasme]

Hello,

I'm trying to create a clone of the GitHub issue timeline using urql and the GitHub GraphQL API.

I'm having trouble implementing inwards pagination using relayPagination since the IssueTimelineItemsConnection doesn't support both after and before.

Instead I've made two aliased subfields, forward and backward, one for each direction. But pagination stops working with more than one selection on the connection.

Is this use-case supported by relayPagination? If not, is it possible to allow the cache resolver to distinguish between the aliased fields so I can implement the remaining logic manually?

I've extracted an example from my codebase, see below.

Thanks!

// cacheExchange:
    //...
    resolvers: {
      Issue: {
        timelineItems: relayPagination(),
      },
    },
    //...

// TimelineComponent
import { useState } from "react";
import { html } from "htm/react";
import { gql, useQuery } from "urql";

const QUERY = gql`
  query RepositoryIssueRouteQuery(
    $owner: String!
    $name: String!
    $number: Int!
    $after: String
    $before: String
  ) {
    repository(owner: $owner, name: $name) {
      id
      issue(number: $number) {
        id
        title
        forward: timelineItems(first: 1, after: $after) {
          pageInfo {
            hasNextPage
            endCursor
          }
          nodes {
            ... on Node {
              id
            }
          }
        }
        backward: timelineItems(last: 1, before: $before) {
          pageInfo {
            hasNextPage
            endCursor
          }
          nodes {
            ... on Node {
              id
            }
          }
        }
      }
    }
  }
`;

function RepositoryIssueRoute() {
  const matchesFromRouter = {
    owner: "FormidableLabs",
    name: "urql",
    number: "1",
  };

  const [cursor, setCursor] = useState(null);
  const variables = {
    owner: matchesFromRouter.owner,
    name: matchesFromRouter.name,
    number: parseInt(matchesFromRouter.number, 10),
    after: cursor,
  };

  const [{ data, error, stale }] = useQuery({
    query: QUERY,
    variables,
  });

  function handleLoadMore() {
    setCursor(data.repository.issue.forward.pageInfo.endCursor);
  }

  if (error) throw error;

  if (!data?.repository?.issue) return "please wait...";

  const { repository } = data;
  const { issue } = repository;

  return html`
    <div>
      <h1>${issue.title} #${issue.number}</h1>
      <div>
        ${issue.forward.nodes.map(
          (node) => html`<p key=${node.id}>${node.id}</p>`
        )}

        <button type="button" onClick=${handleLoadMore} disabled=${stale}>
          Load more…
        </button>

        ${issue.backward.nodes.map(
          (node) => html`<p key=${node.id}>${node.id}</p>`
        )}
      </div>
    </div>
  `;
}

export default RepositoryIssueRoute;