Merge not working for relay-style pagination

Help
1

Hey guys, trying to get relay style pagination working for an infinite scroll feature. From the documentation, it sounds like I don’t need an updateQuery function in my fetchMore call, however if I don’t include it, no re-render happens.

This is my apollo client code:

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        home: relayStylePagination(),
      },
    },
  },
});

And my page.tsx:

query CustomQuery($cursor: Cursor) {
  home(first: 5, after: $cursor) {
    edges {
      node {
        id
      }
    }
    pageInfo: {
      hasNextPage
      endCursor
    }
  }
}

const updateQuery = (previousResult, { fetchMoreResult }) => {
    return fetchMoreResult.home.edges.length ? fetchMoreResult : previousResult;
}

return (
  <div>
    <Items data={data} />
    {pageInfo.hasNextPage && (
    <Button onClick={() => {
      if (pageInfo.hasNextPage) {
        fetchMore({
          variables: {
            cursor: pageInfo.endCursor,
          },
          updateQuery
        })
      }
    }}>{loading ? "Loading..." : "Load More"}</Button>
  )}
  </div>
)

Does this look right? Should it be automatically merging using that policy, or is there something more I need to do?

Appreciate the help, thanks

2

I think it might have something to do with the updated code for Next 13 (appDir)

3

Also console.log(__APOLLO_DEVTOOLS_GLOBAL_HOOK__.ApolloClient) is giving me undefined, and I can’t see the Apollo Devtools tab in the browser inspector