Pagination

input PaginationArgs {
  first: Int      # Number of results to return when paginating forwards (default: 25, max: 100)
  after: String   # Cursor for next page (forward pagination)
  last: Int       # Number of results to return when paginating backwards
  before: String  # Cursor for previous page (backward pagination)
}

type PageInfo {
  hasNextPage: Boolean!      # More results available after endCursor
  hasPreviousPage: Boolean!  # Results exist before startCursor
  startCursor: String        # Cursor of first item in this page
  endCursor: String          # Cursor of last item—pass as `after` for next page
}

const [dishes, setDishes] = useState([]);
const [cursor, setCursor] = useState(null);
const [hasMore, setHasMore] = useState(true);

async function loadMore() {
  const { data } = await client.query({
    query: SMART_MENU_SEARCH,
    variables: {
      preferences: userPreferences,
      pagination: { first: 20, after: cursor }
    }
  });

  const { matches, pageInfo } = data.search;

  setDishes(prev => [...prev, ...matches]);
  setCursor(pageInfo.endCursor);
  setHasMore(pageInfo.hasNextPage);
}

// Trigger loadMore when user scrolls near bottom

query SearchWithPagination($cursor: String) {
  search(
    preferences: { diets: [VEGETARIAN] }
    pagination: { first: 20, after: $cursor }
  ) {
    matches {
      dish { id, name, nutrition { calories } }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
    counts { total }
  }
}

query PaginatedSearch($cursor: String) {
  search(
    preferences: { diets: [VEGETARIAN] }
    pagination: { first: 20, after: $cursor }
  ) {
    matches {
      dish { id, name }
      matchStatus
    }
    almostMatches {
      dish { id, name }
      matchReasons
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}