Relay: Provide an AbortSignal to network functions when possible

[mike-marcacci]

Now that AbortController is available in all up-to-date browsers, it would be helpful if relay passed a signal to network functions. This way, when an in-progress query is invalidated (due to variables changing, or the react component being removed from the virtual DOM, etc) we have a way to cancel the request and open up space in the browser's request queue.

For me, this is especially important in a "search-while-typing" interface, where in-flight queries are frequently invalidated by more user input.

While an AbortController signal is used by native fetch, the spec was designed to be a general purpose mechanism for handling abortable calls, so this is probably a best practice going forward.

[sibelius]

Relay returns a Disposable already, so we could make this work using that

[irrigator]

Since native XMLHttpRequest and libraries like axios already supporting aborting/cancelling a request, is there a way to use them to abort request in Relay at the moment?

[sibelius]

can we solve this in userland https://github.com/entria/ReactNavigationRelayModern/blob/master/src/createRelayEnvironment.js#L14?

[mike-marcacci]

Hey @sibelius, maybe I'm missing something here, but what notifies the fetchQuery from your example that the operation is canceled? I'm totally fine if the relay team choses to use something other than AbortController/AbortSignal, but since that's a generic DOM spec designed exactly for this purpose, it seems like an obvious candidate :-)

I guess to second @irrigator's question, is there already some way to cancel requests not using fetch? I haven't noticed one in any examples or docs, or gleaned such an insight from skimming the source.

[geyang]

@sibelius the Disposable is only returned for Subscriptions, but for fetchQuery it returns a promise. Is there a standard way to

1. cancel the pending HTTP request (in case there are a few in the browser pipeline
2. remove the function in the promise.then(()=> stuff) call?

[josephsavona]

In general we try to return Observables to support a) returning more than value over time and b) cancellation. A couple ideas: we could add a variant of fetchQuery that returns an Observable instead. This would be identical fetchRelayModernQuery.js, just without the .toPromise() at the end. Alternatively you can pass an AbortSignal on the CacheConfig object's metadata, and use that in your fetch function.

[tony]

I'd love to get a full example / demo of aborting a query or mutation request. TypeScript would be nice.

[sibelius]

you can pass an abort signal in cacheConfig and cancel in network layer

[tony]

Is there a working example of this? It may be helpful for other's to see (it would for me, at least)

I haven't interacted at all with the network layer or cache config before.