Pagination broken - prismic.load throws error

[dturkington49]

Background

I would like to display 100+ instances of published content from Prismic on a single page. The GraphQL client only allows 20 results per query. In order to get more results I need to paginate the them. I would like to render more pages of results automatically as the user scrolls.

Problem

I working off this example: https://github.com/birkir/gatsby-source-prismic-graphql/blob/master/examples/pagination/src/pages/index.js It's pretty similar to what I want. Everything works as expected until we hit prismic.load. It is throwing the error in the console:

I can tell the paginated query is returning a 200 from the network tab. This error appears to be thrown after the query but before load() returns. All in all, this is a pretty simple function but I may be missing something.

Example code

export const query = graphql'
  query Contents($first: Int = 3, $last: Int, $after: String, $before: String) {
    prismic {
      aliasName: allContent_types(
        sortBy: name_ASC,
        first: $first, last: $last, after: $after, before: $before
      ) {
        edges {
          node {
            ...Fragment
          }
        }
        pageInfo {
          hasNextPage
          hasPreviousPage
          startCursor
          endCursor
        }
      }
    }
  }
';

const Content = (props) => {

  const [data, setData] = React.useState(props.data.prismic);
  const [page, setPage] = React.useState(-1);

  var contentByCategory = {
    CategoryName: {
      data: props.data.prismic.aliasName,
      ref: useRef(null),
    }
  };

  const loadMoreContent = () => {
    props.prismic.load({
      variables: { after: getCursorFromDocumentIndex(page) },
      query,
      fragments: [fragment]
    }).then((res : any) => {console.log(res); setData(res.data);});
  }


  Object.entries(contentByCategory).map(([category, object]) => {
    useScrollPosition(
      ({ prevPos, currPos }) => {
        const padding = 200;
        const bottomEdge =
          object.ref.current?.clientHeight -
          document.documentElement.clientHeight -
          padding;
        if (prevPos.y + bottomEdge > 0 && currPos.y + bottomEdge < 0) {
          loadMoreMaterials();
        }
      },
      [page],
      object.ref
    );
  });

  return ( 
     ....
  )
};

Content.fragments = [fragment];
export default Content;

[DanielJohnsson87]

@dturkington49 Not sure if this is related, but I've seen a similar error when previewing pages that contain imageSharp queries. In this issue #139 a fix is referenced. It changes the fetchPolicy to no-cache and that seems to solve the imageSharp issue. When I manually changed that line in my local node_modules it fixed the issue for me. Could be worth testing to see if they're related.