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

Posted 2023-03-08

【中文标题】在中继分页graphql上滚动时合并以前的数据

【英文标题】：merge previous data while scrolling on relay pagination graphql

【发布时间】：2021-05-30 13:42:27

【问题描述】：

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

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>

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

【参考方案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) 
    ...
    

【讨论】：

感谢您的回复。这意味着，没有办法扩展 relayStylePagination 以从 params 对象中获取参数？

relayStylePagination 仅处理中继 cursor specification 中已知的参数。其他参数留给您。