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

Question

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

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;

对话查询

在我的例子中，像 first、after、before、last 这样的参数都在 params 对象中

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 应声明为 conversation 的参数，而不是 params 的属性。

Apollo 合并之前的页面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) {
    ...
    }
}