example-relay.tsx

export function BuildList(props: BuildListProps) {
  const { data, hasPrevious, hasNext } = usePaginationFragment<
    BuildListQuery,
    BuildList_builds$key
  >(
    graphql`
      fragment BuildList_builds on Query
        @refetchable(queryName: "BuildListQuery") {
        builds(
          first: $first
          after: $after
          last: $last
          before: $before
          filter: $filter
          pipelineId: $pipelineId
          includeArchived: false
        ) @connection(key: "Query_builds", filters: []) {
          totalCount
          edges {
            __id
            cursor
            node {
              ...BuildItem_build
            }
          }
          pageInfo {
            endCursor
            hasPreviousPage
            hasNextPage
            startCursor
          }
        }
      }
    `,
    props.rootQuery
  );
}