Timeout for queries/mutation - backend does not response causing an infinite loading

[acuevas91]

I have recently an issue regarding an infinite loading due to the app did not get any response for the backend so the spinner never ends.

My question is, despite the issue is in the backend, does anyone know if there is an option for adding a timeout for queries/mutations in case backend does not respond due to an issue?

Many thanks in advance!

[enisdenjo]

You can create a timeout yourself. Roughly:

import { createClient } from 'graphql-ws';

const client = createClient({
  url: 'ws://localhost:4000/graphql',
});

let timeout;
const dispose = client.subscribe(
  {
    query: '{ slowQuery }',
  },
  {
    next: (value) => {
      // value received, clear timeout
      clearTimeout(timeout);
    },
    error: (err) => {},
    complete: () => {},
  },
);
// remove subscription after a timeout of 3 seconds
timeout = setTimeout(dispose, 3000);

[acuevas91]

So we should emit in the sink error in the timeout right? I am figuring out how could I throw a custom timeout exception and catch this error at ngrx level

[enisdenjo]

Ok so you would like to report an error if the timeout happens? Not just stop the subscription? If so, you can simply wrap all this in a custom subscribe function and then dispose and report the error on timeout.

[acuevas91]

Yes, actually this is what I was trying out 😄 so, what you mean is to wrap client.subscribe function and if error, dispose and report the error in that subscription? am I right?

[enisdenjo]

Yep yep. Roughly:

function subscribeWithTimeout(client, payload, sink) {
  let timeout;
  const dispose = client.subscribe(payload, {
    ...sink,
    next: (value) => {
      sink.next(value);
      if (timeout) {
        clearTimeout(timeout);
      }
    },
  });
  timeout = setTimeout(() => {
    dispose();
    sink.error(new Error('Subscribe has timed out.'));
  }, 3000);
  return () => {
    dispose();
    if (timeout) {
      clearTimeout(timeout);
    }
  };
}

[acuevas91]

Many thanks for all your support, that works!