UseApolloClient 查询不会返回 fetchMore

Posted 2023-03-08

【中文标题】UseApolloClient 查询不会返回 fetchMore

【英文标题】：UseApolloClient query won't return fetchMore

【发布时间】：2019-11-26 19:00:22

【问题描述】：

我正在与 Apollo 在客户端进行项目。我在客户端使用 react-apollo-hooks。我对 useApolloClient 有疑问。

当我向我的客户发起查询时，我进入了 useApolloClient，我没有取回我需要的所有数据。缺少 FetchMore。如果我使用常规查询 (useQuery) 我明白了。但问题是我需要在点击时触发该查询，并且我需要使用 apollo 客户端提供的查询。

我有这个功能来获取点击数据：

    const bulkSearch = async data => 
        setContent(<Spinner />);
        showModal();

        try 
          const response = await client.query(
            query: BULK_SEARCH_PRODUCTS,
            variables:  data 
          );

          if (!response.loading) 
            setContent(
              <ProductsListDisplay
                products=response.data.bulkSearch.products
                fetchMore=response.fetchMore
                count= total: 10 
              />
            );

            return 200;
          
         catch (err) 
          return 400;
        
      ;

并且响应不包含 fetchMore。

另一方面，经典查询返回 fetchMore。

    const newdata = useQuery(BULK_SEARCH_PRODUCTS, 
        variables:  data:  ids: ["536003", "513010"]  
      );

一些帮助？谢谢！

【参考方案1】：

根据 apollo-client 文档，ApolloClient.query 返回一个解析为 ApolloQueryResult 的 Promise，这是一个更简单的对象，只有 data、errors、loading、networkStatus 和stale 作为属性。

另一方面，react-apollo 的Query 组件的render prop argument 得到了一个更丰富的对象，fetchMore 是它的附加属性之一。如果你想使用原始 ApolloClient 对象做类似的事情，你必须使用ApolloClient.watchQuery，它返回一个ObservableQuery，你可以subscribe 来消费结果。这样做的好处是您可以访问更多方法，例如ObservableQuery.fetchMore。

请注意，此方法与使用 ApolloClient.query 根本不同，因为该函数请求一个查询并将结果作为 Promise 返回，而 ApolloClient.watchQuery 始终监控您的缓存并在缓存存储更改时将更新的结果推送到您的订阅方法，所以这是一个更复杂的生命周期。一般来说，如果您已经在使用react-apollo 或@apollo/react-X 软件包之一，您可能希望远离ApolloClient.watchQuery，因为这些库的功能直接构建在它之上并且旨在更容易消费。

希望这会有所帮助！

【讨论】：

您好，感谢您的出色回答。最后使用了查询组件，但是我不知道这个，对我帮助很大！