Apollo-client: Is relaypagination() appending new collection to existing collection?

[albuen03]

I am working using relay pagination. I want to append incoming edges to the existing edges but relay pagination keeps on overriding existing edges. Is this a normal behavior?

[benjamn]

Are you providing an args.after cursor in your query (using variables), either from the edge.cursor of the last edge or from pageInfo.endCursor?

You might also try setting a breakpoint (or debugger statement) inside the merge function provided by relayStylePagination, so you can step through and see exactly what it's doing.

[albuen03]

I provided args.after in the query based on endCursor. I created my own merge functionality based on relayStylePagination merge to achieve the desired behavior.

[tsnieman]

@albuen03 Would you mind sharing your solution? I am facing similar issues and it seems like we have a similar approach to our pagination variables.

[firmanjml]

I am having the same behavior and I don't this is normal. Shouldn't it append new data on old list instead of overwrite the whole list ?
Here's my code snippet, and I'm not sure if I'm doing this right.

const client = new ApolloClient({
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          getMessages: relayStylePagination()
        }
      }
    }
  }),
  link
});

if (data.getMessages.pageInfo.hasNextPage) {
    fetchMore({
        variables: {
            before: data.getMessages.pageInfo.endCursor
        }
   });
}

```
query getMessages($id: Int!, $before: String) {
getMessages(offerId: $id, before: $before) {
pageInfo {
endCursor
hasNextPage
}
edges {
node {
_id: id
text
user: sender {
_id: id
}
}
cursor
}
}
}
````

[albuen03]

@tsnieman @firmanjml I created somewhat like, in the typePolicies

merge(existing, incoming) {
            return {
              ...existing,
              ...incoming,
              edges: compact(
                uniqBy(
                  'node.__ref',
                  concat(get('edges', existing), get('edges', incoming))
                )
              )
            };
          }

It appends the data to the existing collection.

[ruipneves]

I am having a strange behavior using relayStylePagination and optimisticResponse.
For some reason, the optimisticResponse seems to be working just fine as it is immediately shown in the UI and updated when the response comes from the server but, the entire list gets re-rendered on both situations. It seems that the node references are constantly changing.

I have tried to modify the relayStylePagination merge function and apparently something before the merge function is modifying the array references.

If I don't try to modify the cache in the mutation and let the subscription handle the merge with updateQuery the references are not modified.

Can anyone help me?

Edit: After more debugging it seems that the refs are OK after my merge functions along the tree and the problem might be when the __ref is converted to the data object? In the merge functions I get correct refs but in my component they are never the same

Also, whenever I'm adding a new item to a list with relay pagination style, should I create a reference of the node or how should I do it? At the moment, i have a reference for the node only:

{ node: __ref: "Message:123456789", cursor: "123456789"}

@benjamn

Edit 2: I found out that optimisticResponse is the problem and not relayStylePagination or any merge that I have.
An issue already referenced this with a possible solution by modifying the entityStore.js file but it might have other repercussions.

https://github.com/apollographql/apollo-client/issues/4141#issuecomment-596215752

This will be solved in v3.4