Apollo GraphQL 请求被取消 [英] Apollo GraphQL requests are canceled

问题描述

我正在使用 Downshift 和 react-apollo 构建一个 React 类型提前文本字段组件.当用户键入时，我会查询预先键入的建议并将其显示在文本字段下方.

I am building a React type ahead text field component using Downshift and react-apollo. As the user types I am querying type ahead suggestions and present them underneath the text field.

很遗憾，这次体验并不顺利.出于某种原因，Apollo 不时取消超过 50% 的请求.

Unfortunately, this experience is not going smoothly. For some reason every now and then Apollo cancels more than 50 percent of the requests.

我还记录了由 graphql HoC 包装的组件可以访问的响应数据.在所需的情况下，loading 状态设置为 false 并且我的 words 数据可用.在不需要的情况下，loading 状态设置为 true 并且没有 words 数据可用.无论是需要还是不需要的请求，后端每次都会执行.

I am also logging the response data that is accessible to the component wrapped with the graphql HoC. In the desired case, the loading state is set to false and my words data are available. In the undesired case, loading state is set to true and no words data are available. Whether desired or undesired request, the backend executes every time.

请注意1的networkStatus.

Please note the networkStatus of 1.

请注意7的networkStatus.

Please note the networkStatus of 7.

为什么 apollo 会取消这些请求?如何解决这个问题?

Why is apollo cancelling these requests? How to fix this?

推荐答案

你是如何使用 graphql 高阶组件的?

How are you using the graphql higher order component?

您似乎在渲染函数本身中创建了该高阶组件的实例.渲染会被多次触发，特别是如果您使用 .如果在请求解决之前发生重新渲染，则旧请求将被取消.您可以通过使用新的 Query 组件来避免这种情况.Query 组件可以轻松地在渲染中使用.它优雅地处理那些重新渲染.

It seems you create an instance of that higher order component in the render function itself. render is triggered many times especially if you use . If a re-render occurs before the request has been resolved the old request is being canceled. You can avoid this by using the new Query component instead. The Query component can easily be used within render. It handels those re-renders gracefully.

这篇关于Apollo GraphQL 请求被取消的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！