Connections for Subscriptions over Multipart HTTP never close in React

[ethanjweiner]

Hello!

I created a subscription using useSubscription using a custom subscription exchange with Apollo's URQL adapter for multipart subscriptions:

subscriptionExchange({
  forwardSubscription: createFetchMultipartSubscription(endpoint, {
    fetch: (input, init) =>
      fetch(input, {
        ...init,
        credentials: 'include',
      }),
  }),
}),

It appears that useSubscription calls unsubscribe on the source stream, but the HTTP request itself is never aborted, leaving the connection open and downloading content long after the component initiating the subscription unmounts. This has caused problems for me in Cypress: requests made following a re-initialization of a subscription can get stalled because of what appears to be Chrome's 6 TCP connection limit, since the previous subscriptions(s)' connections are still open.

Is this something that URQL should be able to handle itself?

Thank you - I'll look for a solution in the meantime.

[ethanjweiner]

Update: I wrote this custom hook that uses a custom fetch fn to close connections on component unmount:

/**
 * This hook ensures a subscription is cancelled when the component unmounts.
 * It is particularly useful for subscriptions over multipart HTTP, as it prevents connections from outliving the component.
 * Its interface is the same as URQL's useSubscription hook.
 *
 * @param args - The arguments to be passed to the useSubscription hook.
 * @returns A tuple containing the result of the useSubscription hook and the executeSubscription function.
 */
export const useCancellingSubscription = <
  Data = any,
  Result = Data,
  Variables extends AnyVariables = AnyVariables,
>(
  args: UseSubscriptionArgs<Variables, Data>,
): UseSubscriptionResponse<Result, Variables> => {
  const [data, executeSubscription] = useSubscription<Data, Result, Variables>({
    ...args,
    pause: true,
  });

  const { pause } = args;

  useEffect(() => {
    const abort = new AbortController();

    if (!pause) {
      executeSubscription({
        fetch: (input, init) => {
          return fetch(input, {
            ...init,
            signal: abort.signal,
          });
        },
      });
    }

    return () => {
      abort.abort();
    };
  }, [executeSubscription, pause]);

  return [data, executeSubscription];
};

And adjusted the URQL provider to accept a custom fetch function via operation context:

subscriptionExchange({
  forwardSubscription: (request, operation) => {
    return createFetchMultipartSubscription(endpoint, {
      fetch: (input, init) => {
        // Use a custom fetch function if available (e.g. for a custom signal / abort controller; see `useCancellingSubscription`)
        const fetchFn = operation.context.fetch || fetch;

        return fetchFn(input, {
          ...init,
          credentials: 'include',
        });
      },
    })(request);
  },
}),

[ethanjweiner]

This was fixed upstream in the apollo fetch multipart subscription URQL plugin here: apollographql/apollo-client#12567