Apollo 客户端 fetchMore 来自 useQuery 触发两个网络请求

Posted 2023-02-21

【中文标题】Apollo 客户端 fetchMore 来自 useQuery 触发两个网络请求

【英文标题】：Apollo client fetchMore from useQuery fires two network requests

【发布时间】：2022-01-06 22:43:18

【问题描述】：

我正在尝试实现loadMore 功能，该功能使用useQuery 的fetchMore 功能将项目附加到原始列表中。

const  data, fetchMore  = useQuery(GET_PODCAST_SERIES, 
    variables: 
      limit: 12,
      offset: 0,
      pathOrId: `$site/podcast/$slug`,
    ,
    nextFetchPolicy: 'cache-first',
  );

const length = data.PodcastSeriesQuery.podcastSeries.podcastEpisodes.length;

return <..>
  ...
   <button onClick=() => 
       fetchMore(
         variables:  offset: length  
       )
    >load more</button>
</..>

查询看起来像这样

const GET_PODCAST_SERIES = gql`
  query PodcastSeries($pathOrId: String, $limit: Int, $offset: Int) 
    PodcastSeriesQuery(pathOrId: $pathOrId) 
      podcastSeries(limit: $limit, offset: $offset) 
        id
        ...
        podcastEpisodes 
          id
          ...
        
      
    
  
`;

缓存看起来像这样

cache: new InMemoryCache(
      typePolicies: 
        Query: 
          fields: 
            PodcastSeriesQuery: 
              keyArgs: ['pathOrId'],
              merge(_, incoming) 
                return incoming;
              ,
            ,
          ,
        ,
        PodcastSeries: 
          fields: 
            podcastEpisodes: 
              merge(existing = [], incoming) 
                return [...existing, ...incoming];
              ,
            ,
          ,
        ,
      ,
    ),

问题是每当我调用fetchMore 时，它都会发送两个网络请求，而默认的总是会触发。例如

第一次点击加载更多

 - network request 1 -> offset: 12, limit: 12, pathOrId: ...

 - network request 2 -> offset: 0, limit: 12, pathOrId: ...

第二次点击加载更多

  - network request 1 -> offset: 36 (even thought it should be 24, but it is still correct because the first click fetches twice making the data.list bigger), limit: 12, pathOrId: ...

  - network request 2 -> offset: 0, limit: 12, ....

所以默认查询总是被触发..

我应该如何解决这个问题？谢谢。

【参考方案1】：

这只是因为缓存不正确。我通过这样做解决了它

cache: new InMemoryCache(
      typePolicies: 
        Query: 
          fields: 
            PodcastSeriesQuery: 
              keyArgs: ['pathOrId'],
              merge(existing, incoming) 
                // before -> return incoming || existing;
                return existing || incoming; // after
              ,
            ,
          ,
        ,
        PodcastSeries: 
          fields: 
            podcastEpisodes: 
              merge(existing = [], incoming) 
                return [...existing, ...incoming];
              ,
            ,
          ,
        ,
      ,
    ),