Search code examples
reactjsreact-apolloapollo-client

Apollo GraphQL requests are canceled

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.

typeahead-react-component

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

cancelled-requests

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.

Undesired case

undesired-case

Please note the networkStatus of 1.

Desired case

desired-case

Please note the networkStatus of 7.

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

Solution

  • How are you using the graphql higher order component?

    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.