merge previous data while scrolling on relay pagination graphql

Question

I am trying to use relay style pagination. However, I am getting trouble on infinite scrolling. When i scroll or load next sets of data then I just get the current data without it being merged to the previous data. This is how I have done

cache.ts

import { InMemoryCache } from '@apollo/client';
import { relayStylePagination } from '@apollo/client/utilities';

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        conversation: relayStylePagination(),
      },
    },
  },
});

export default cache;

Conversation Query

In my case, params like first, after, before, last are inside params object

export const CONVERSATION = gql`
  query conversation($channel: ShortId, $contact: ShortId, $params: ConnectionInput) {
    conversation(channel: $channel, contact: $contact, params: $params) {
      status
      data {
        pageInfo {
          ...PageInfo
        }
        edges {
          cursor
          node {
            ...Communication
          }
        }
      }
    }
  }
  ${PAGE_INFO}
  ${COMMUNICATION}
`;

Conversation.tsx

const [loadConversation, { data, fetchMore, networkStatus, subscribeToMore }] = useLazyQuery(
    CONVERSATION,
  );
useEffect(() => {
  isMounted.current = true;
  if (channelId && contactId) {
    loadConversation({
      variables: {
        channel: channelId,
        contact: contactId,
        params: { first },
      },
    });
  }
  return () => {
    isMounted.current = false;
  };
}, [channelId, contactId, loadConversation]);

<React.Suspense fallback={<Spinner />}>
  <MessageList messages={messages ? generateChatMessages(messages) : []} />
  {hasNextPage && (
    <>
      <button
        type='button'
        ref={setButtonRef}
        id='buttonLoadMore'
        disabled={isRefetching}
        onClick={() => {
          if (fetchMore) {
            fetchMore({
              variables: {
                params: {
                  first,
                  after: data?.conversation?.data?.pageInfo.endCursor,
                },
              },
            });
          }
        }}
      />
    </>
  )}
</React.Suspense>

Can I know what I have missed?

Hammack

Answer 1

The first, after, before, last should be declared as arguments of conversation rather than as properties of params.

Apollo merges the previous pages when the query arguments contain after/before .

query conversation($channel: ShortId, $contact: ShortId, $after: String, $first: Int, $before: String, $last: Int) {
    conversation(channel: $channel, contact: $contact, after: $after, first: $first, before: $before, last: $last) {
    ...
    }
}

Handbag

Thank you for your response. This means, there is no way to extend relayStylePagination to take arguments from params object? – Hammack

The relayStylePagination only handles the parameters known in relay cursor specification . Other parameters are leave to you. – Handbag