Pagination with Apollo

pack-browser-grid.js

import PackCard from './pack-card';
import PropTypes from 'prop-types';
import React, {useEffect} from 'react';
import {Grid} from '@material-ui/core';
import {useWindowScroll, useWindowSize} from 'react-use';

export default function PackBrowserGrid(props) {
  const {y} = useWindowScroll();
  const {height} = useWindowSize();

  const scrollHeight = y + height;
  const {packs, fetchMore, pageSize} = props;
  useEffect(() => {
    // load the next page of results when the user scrolls to the bottom of the
    // page, and there is still more to load
    const remainder = packs.length % pageSize;
    if (scrollHeight === document.documentElement.scrollHeight && !remainder) {
      fetchMore({
        variables: {
          offset: packs.length
        },
        updateQuery(prev, {fetchMoreResult}) {
          return !fetchMoreResult
            ? prev
            : {
                ...prev,
                packs: [...prev.packs, ...fetchMoreResult.packs]
              };
        }
      });
    }
  }, [scrollHeight, fetchMore, packs.length, pageSize]);

  return (
    <Grid container spacing={3}>
      {packs.map(pack => (
        <Grid key={pack.slug} item xs={12} sm={6} lg={4}>
          <PackCard pack={pack} />
        </Grid>
      ))}
    </Grid>
  );
}

PackBrowserGrid.propTypes = {
  packs: PropTypes.array.isRequired,
  pageSize: PropTypes.number.isRequired,
  fetchMore: PropTypes.func.isRequired
};

pack-browser.js

import PackBrowserGrid from './pack-browser-grid';
import PropTypes from 'prop-types';
import React, {Fragment} from 'react';
import gql from 'graphql-tag';
import {Link} from 'gatsby-theme-material-ui';
import {PACK_FRAGMENT} from '../utils/queries';
import {Typography} from '@material-ui/core';
import {useQuery} from '@apollo/react-hooks';

const LIST_PACKS = gql`
  query ListPacks($type: PackType, $limit: Int!, $offset: Int) {
    packs(type: $type, limit: $limit, offset: $offset) {
      ...PackFragment
    }
  }
  ${PACK_FRAGMENT}
`;

const packSize = 30;
export default function PackBrowser(props) {
  const {loading, error, data, fetchMore} = useQuery(LIST_PACKS, {
    variables: {
      offset: 0,
      limit: packSize,
      type: props.packType
    }
  });

  if (loading || error || !data.packs || !data.packs.length) {
    return (
      <Typography
        gutterBottom
        variant="h5"
        style={{marginTop: 8}}
        color={error ? 'error' : 'textSecondary'}
      >
        {error ? (
          error.message
        ) : loading ? (
          'Loading...'
        ) : props.packType === props.packTypeTeachers ? (
          <Fragment>
            Your teachers haven&apos;t created any packs yet. They should check
            out the <Link to="/teacher-portal">Teacher Portal</Link>.
          </Fragment>
        ) : (
          'No packs to show'
        )}
      </Typography>
    );
  }

  return (
    <PackBrowserGrid
      packs={data.packs}
      fetchMore={fetchMore}
      pageSize={packSize}
    />
  );
}

PackBrowser.propTypes = {
  packType: PropTypes.string,
  packTypeTeachers: PropTypes.string.isRequired
};