CODEWITHSUNDEEP
reactjsreact-nativegraphqlapollostrapi
Gabriel Eliade
Gabriel Eliade

Reputation: 33

Apollo 3 pagination with start and limit more and Field Policies

Im using fetchmMore Apollo function like this :

  const {
    data: data_next_drops,
    loading: loading_next_drops,
    error: error_next_drops,
    fetchMore: fetchMoreNext,
    refetch: refetchNext
  } = useQuery(GET_ALL_NEXT_DROPS, {
    variables: { 
      date: date,      
      limit: limit,
      start: starte
    },
  });

  const loadMore = async () => {
    setLoading(true)
    fetchMoreNext({
      variables: {
        date: date,      
        limit: 10,
        start: Skip
      },
      updateQuery: (preveResult, {fetchMoreResult}) => {
        setSkip(Skip+limit)
        fetchMoreResult.drops = [
          ...preveResult.drops,
          ...fetchMoreResult.drops
        ]
        setLoading(false)
        return fetchMoreResult;
      }
    })  
  }

but I have this warning :

    The updateQuery callback for fetchMore is deprecated, and will be removed
in the next major version of Apollo Client.

Please convert updateQuery functions to field policies with appropriate
read and merge functions, or use/adapt a helper function (such as
concatPagination, offsetLimitPagination, or relayStylePagination) from
@apollo/client/utilities.

The field policy system handles pagination more effectively than a
hand-written updateQuery function, and you only need to define the policy
once, rather than every time you call fetchMore.

As you can see I use limit and start for my pagination so I think I can't use offsetLimitPagination or relayStylePagination, so is this possible to use concatPagination? or maybe is there an another method ?

Thank you with advance !

Upvotes: 0

Views: 1368

Answers (1)

bossno
bossno

Reputation: 685

The warning just tells you to move out updateQuery function to InMemoryCache.

See pagination documentation (read it completely, I missed some important information the first time) or as I have an unrelated issue that made me produce this sandbox with a working example very close to yours.

Upvotes: 1

Related Questions