CODEWITHSUNDEEP
graphqlapollo-client
Peter Malik
Peter Malik

Reputation: 463

Apollo Client relayStylePagination doesn't fetchMore

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!

Upvotes: 6

Views: 3793

Answers (1)

Herku
Herku

Reputation: 7666

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()
      },
    },
  },
});

Upvotes: 8

Related Questions