fetchMore not updating the data

Help
,
1

I’m trying to implement the Offset Pagination in React using Apollo GraphQL. I’m using the fetchMore() function against a button click to show the updated data but the data is not being updated nor the component rerenders.

Things I have done so far by following the official documentation of Apollo GraphQL:

Added the field policy to the App.js file

  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          missions: offsetLimitPagination()
        },
      },
    },
  }),

Query to call public GraphQL API (GraphiQL Explorer) which takes limit and offset as input and is successfully returning the expected data

import { gql } from "@apollo/client"

export const GET_ITEMS = gql`
    query Missions($offset: Int, $limit: Int){
        missions(offset: $offset, limit: $limit){
            id
            manufacturers
        }
    }
`

And calling the query in my component which successfully returns the expected data

  const {data, error, loading, fetchMore} = useQuery(GET_ITEMS, {
    variables: {
      offset: 0,
      limit: 3
    }
  })

Providing new variables to fetchMore function on a button click but it doesnt update the data:

        <button onClick={() => {
          fetchMore({
            offset: data.missions.length
          })
          console.log(data.missions.length)
        }} >Show Items</button>

I don’t know what I’m missing here. I’ve a very tight deadline to make this pagination happen. I’m pretty tensed. I can even pay you to let me know what I’m missing here.

2

Hey! I had a similar problem a while back when learning apollo client.

My issue was that I needed to write a custom type policy for the merge function mentioned in the docs. The trick is to make sure the type returned from the merge function is exactly the same as the type of the data you got in the original response.

I wrote a short article about it, maybe it will help you out – Nested Pagination with Apollo Client 3 Type Policies | by Nick McLean | Medium

Let me know how it goes!

3

Thanks a lot Nick ! Seems logical but as I was following the doc without much thoughts I was stuck, I’m really glad you gave us the trick :blush: