React native cli with apollo pagination

[Raynier98]

I have a news app, which is receiving information from a web page with wordpress, for this I am using apollo client, v^3.5.8 (latest) my problem lies in the pagination of my app, there is not much documentation by apollo about this since I am using react native and when I integrate the code I get a warning like the following:

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.

and another warning like this:

Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

I have looked for information on how to do it and it tells me an option with offset but it tells me that it does not recognize this variable in graphql

Could someone tell me how to use offset and limit correctly or an updated example of how it works

I leave my code below in case my code has any errors:

const POSTS_INICIO_QUERY = gql `

    query inicioQuery($first: Int!, $after: String){
        posts (first: $first, after: $after) {
            pageInfo {
                endCursor
                hasNextPage
            }
            edges {
                node {
                    id
                    title
                    slug
                    date
                    categories {
                      nodes {
                        name
                      }
                    }
                    tags {
                      edges {
                        node {
                          name
                        }
                      }
                    }
                    featuredImage {
                      node {
                        sourceUrl
                      }
                    } 
                }
            }
        }
    }
`

function posts({navigation}) {
    const scheme = useColorScheme();
    const { data, error, loading, fetchMore, refetch, networkStatus } = useQuery(
        POSTS_INICIO_QUERY, 
        {
            variables:{first:10},
            notifyOnNetworkStatusChange: true
        }
    )
    
    if (error)
    return (
      <View style={styles.loading}>
        <Text style={styles.errorText}>Ups :( Algo Salio Mal:  {error.message}</Text>
      </View>
    )

    let posts = [];
    if(data && data.posts && data.posts.edges)
    posts = data.posts.edges;

    const onUpdate = (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prev;
        const { pageInfo } = fetchMoreResult.posts;
        const node = [
          ...prev.posts.edges.node,
          ...fetchMoreResult.posts.edges,
        ];
        return Object.assign({}, prev, {
          posts: {
            __typename: prev.posts.edges.__typename,
            edges: {
              __typename: prev.posts.__typename,
              pageInfo,
              node,
            },
          },
        });
    };

    const handleOnEndReached = () => {
      if (data.posts.pageInfo.hasNextPage)
        return fetchMore({
          variables: {
            after: data.posts.pageInfo.endCursor,
            first: 20,
          },
          updateQuery: onUpdate,
        });
    };

    if(loading && posts.length === 0){
        return (
            <View style={styles.loading}>
                <ActivityIndicator size="large" color="#17A0D1" />
            </View>
        )
    }

    const refreshing = networkStatus === NetworkStatus.refetch;

I’m new to apollo and if someone knows another simpler or better documented way, it would be a great help too.