apollo-client 用于发出多个请求以进行实时搜索

Question

我们正在使用 Apollo 在应用程序中开发一个搜索引擎，我们不知道如何开发一个实时搜索引擎，在每次按下键盘时向服务器发出请求。

文档上说我们必须使用新的 <Query /> 组件，但我发现这种情况最适合触发手动查询：https://www.apollographql.com/docs/react/essentials/queries.html#manual-query

不知道我说的对不对，或者我们应该换个方式使用它。

谢谢！

Answer 1

正如在您分享的 link 中所说，如果您想延迟触发查询直到用户执行某个操作（您的情况），例如单击按钮，您想要使用ApolloConsumer 组件并直接调用 client.query()。

Query 组件不能在这种情况下使用，因为当 React 挂载 Query 组件时，Apollo 客户端会在渲染期间自动触发您的查询。

Answer 2

更新

使用 Apollo Client V2.6，现在可以使用挂钩手动对服务器进行查询。您想要的钩子是 useLazyQuery.

你会有这样的东西；

const [onSearch, { called, loading, data }] = useLazyQuery(
    SEARCH_QUERY,
    { variables: { searchText: state.searchText } }
  );

然后，只要您的文本在 useEffect 中发生变化，您就可以调用 onSearch 函数，如下所示。

useEffect(() => {
onSearch()
}, [state.searchText])

请注意，您可能想要 dounce 您的 onSearch 功能，这样您就不会在每次击键时都敲打您的服务器。

apollo-client used to make multiple requests to make a real-time search