在中继分页上滚动时合并以前的数据 graphql

Question

我正在尝试使用中继式分页。 但是，我在无限滚动时遇到了麻烦。 当我滚动或加载下一组数据时，我只会获取当前数据，而不会将其合并到以前的数据中。 这就是我所做的

缓存.ts

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

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

export default cache;

对话查询

在我的例子中，像 first、after、before、last 这样的参数在参数 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}
`;

对话.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>

我能知道我错过了什么吗？

Answer 1

第first, after, before, last应该声明为 arguments 的conversation ，而不是作为params的属性。

当查询 arguments 包含after / before时， Apollo 会合并前面的页面。

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) {
    ...
    }
}