Apollo Client relayStylePagination doesn't fetchMore

Question

I have implemented relayStylePagination() according to the apollo docs(https://www.apollographql.com/docs/react/pagination/cursor-based/#relay-style-cursor-pagination) in the following way:

index.js:

const httpLink=new HttpLink({
  uri:'https://api.github.com/graphql',
  headers:{
    authorization: 'Bearer -'
  }
})

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

const client=new ApolloClient({
  link:httpLink,
  cache
})

ReactDOM.render(
  <ApolloProvider client={client}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </ApolloProvider>,
  document.getElementById('root')
);

App.js:

const  App=()=> {

  const {loading,error,data,fetchMore}=useQuery(GET_REPOSITORIES_OF_CURRENT_USER,{
    variables:{login:"rwieruch"}
  })

  if (loading) return <h1>Loading...</h1>
  if (error) return <p>Error...</p>
  console.log(data.user.repositories.edges)
  console.log(data)

  const pageInfo=data.user.repositories.pageInfo
  console.log(pageInfo)
  return(
    <div>
      <RepositoryList repositories={data.user.repositories} onLoadMore={()=>
           {return fetchMore({
              variables:{
                after: data.user.repositories.pageInfo.endCursor,
              }
            })}
       }
      />
    </div>
  )
}

How the button is rendered in the Child component:

<button onClick={onLoadMore}>Hey</button>

And , finally the gql query:

const GET_REPOSITORIES_OF_CURRENT_USER = gql`
  query getUser($login:String!,$after:String){
  user (login:$login){
    repositories(
      first: 10,
      after:$after
    ) {
      edges {
        node {
          id
          name
          url
          descriptionHTML
          primaryLanguage {
            name
          }
          owner {
            login
            url
          }
          stargazers {
            totalCount
          }
          viewerHasStarred
          watchers {
            totalCount
          }
          viewerSubscription
        }
      }
        pageInfo{
          endCursor
          hasNextPage
      }
    }
  }
}
`;

The problem is that when I press the button with the onClick prop corresponding to fetchMore , nothing is fetched. Also, there are no errors in my console- it just doesn't do anything. Can you please let me know why? I have been trying to figure it out for hours now. Thank you!

Hainan

Can you check if the function that you are passing onLoadMore is actually called? You could do that by logging before the return statement. – Cremona

@Cremona Hello ! Yes , it is being called , I tried loggin the endCursor within the function and everything is fine... – Hainan

@Cremona Apollo gives the following warning in the console , yet it isnt marked as an error Cache data may be lost when replacing the user field of a Query object. To address this problem (which is not a bug in Apollo Client), either ensure all objects of type User have an ID or a custom merge function, or define a custom merge function for the Query.user field, so InMemoryCache can safely merge these objects: I have added an id to the user query and the warning dissapeared , yet it still didnt fetchMore.. – Hainan

Okay, I will write an answer now, I think I see your problem – Cremona

Answer 1

Your type policy specifies pagination for the Query.repositories field. But you are paginating the User.repositories field.

Try changing to this:

const cache = new InMemoryCache({
  typePolicies: {
    User: { // <- (!)
      fields: {
        repositories:relayStylePagination()
      },
    },
  },
});

Cremona

What a lifesaver! The documentation seems a bit misleading in this case , because they give the following query const COMMENTS_QUERY = gql query Comments($cursor: String) { comments(first: 10, after: $cursor) { edges { node { author text } } pageInfo { endCursor hasNextPage } } } ; , but in the typePolicies : const cache = new InMemoryCache({ typePolicies: { Query: { fields: { comments: relayStylePagination(), }, }, }, }); . Thank you so much ! – Hainan

Yes, in the documentation the field Query.comments is paginated. This requires some understanding of how the type policies are specified in general. – Cremona

Thank you very much, I have been sitting on this for ages! – Hainan

Happy I could help! – Cremona