1

我正在与 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"] } }
      });

一些帮助 ？谢谢！

4

1 回答 1

3

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

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

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

希望这可以帮助！

于 2019-07-18T19:01:21.883 回答