UseApolloClient 查询不会 return fetchMore

Question

我在客户端与 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。

其他方式经典查询returns fetchMore.


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

有帮助吗？谢谢！

Answer 1

根据 apollo-client 文档，ApolloClient.query returns a Promise that resolves to an ApolloQueryResult，这是一个更简单的对象，只有 data、errors、loading、networkStatus，和 stale 作为属性。

另一方面，render prop argument of react-apollo's Query component gets fed a much richer object, with fetchMore being one of its additional properties. If you want to do something similar using the raw ApolloClient object, you would have to use ApolloClient.watchQuery, which returns an ObservableQuery that you can subscribe to consume results. The benefit of this is that you have access to more methods, such as ObservableQuery.fetchMore.

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

希望对您有所帮助！

UseApolloClient 查询不会 return fetchMore

UseApolloClient query won't return fetchMore

reactjs

graphql

react-apollo

apollo-client

react-apollo-hooks