Using AbortController

[sushilbansal]

I am using react-query with graphql using custom fetch. With help of this library i was able to generate the queries and mutations; It works really well.

I want to send signal (Abort Controller) from each query to my custom fetch so that i can cancel that query. How i can do that. My custom fetch looks like this:

import { graphqlFetchOptions } from './fetchOptions';

export const fetchData = <TData, TVariables>(
  query: string,
  variables?: TVariables,
): (() => Promise<TData>) => {
  return async () => {
    try {
      const { headers, ...fetchOptions } = graphqlFetchOptions(
        query,
        variables,
      );
      const promise = fetch(process.env.NEXT_PUBLIC_SERVER_URL as string, {
        headers: {
          ...headers,
        },
        credentials: 'include',
        ...fetchOptions,
      });

      const res = await promise;
      if (!res.ok) {
        throw new Error(
          'Network Error occured while fetching the data. Please try again later' +
            res.status +
            res.statusText,
        );
      } else {
        const json = await res.json();

        if (json.errors) {
          // const { message } = json.errors[0] || 'Error..';
          throw new Error(JSON.stringify(json.errors[0]));
          // return json.errors[0];
        }
        return json.data;
      }
    } catch (e) {
      throw new Error(
        'Some error occured while fetching the data. Please try again later' +
          e,
      );
    }
  };
};

[ardatan]

GraphQL Code Generator is only responsible of generating some wrapped functions etc that still use the original stuff. So please ask those questions in react-query or their community channel.

[sushilbansal]

Apologies i did not explain well. react-query allows cancellation of queries. There is no problem with that. My question was how i can send additional parameters (signal from AbortController) to this fetchData function. I got the function implementation from GraphQL Code Generator website:

export const fetchData = <TData, TVariables>(
  query: string,
  variables?: TVariables,
): (() => Promise<TData>) => {

[sushilbansal]

More info: i went through all issues and found out that someone raised an issue for the same: https://github.com/dotansimha/graphql-code-generator/issues/7035

[happyeric77]

I think there is already a PR that implements this (passing abortSignal).

But it has been pending for a while not merged yet.
Do you find any way to work it around?