reactjs - UseApolloClient 查询不会返回 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。

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

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

有什么帮助吗？谢谢!

Answer 1

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

另一方面，render prop argument react-apollo 的 Query 组件被提供了一个更丰富的对象，其中 fetchMore 是其附加属性之一。如果您想使用原始 ApolloClient 对象执行类似的操作，则必须使用 ApolloClient.watchQuery ，它返回 ObservableQuery你可以subscribe消耗结果。这样做的好处是你可以访问更多的方法，比如ObservableQuery.fetchMore .

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

希望这有帮助!