Cannot pass AbortSignal to request in TypeScript

[thedanchez]

Description

I am attempting to pass an AbortSignal to client.request and am receiving the following error output from TypeScript.

Type 'AbortSignal' is not assignable to type 'AbortSignal'. Two different types with this name exist, but they are unrelated.
  Types of property 'onabort' are incompatible.
    Type '((this: AbortSignal, ev: Event) => any) | null' is not assignable to type '((this: AbortSignal, ev: Event) => any) | null'. Two different types with this name exist, but they are unrelated.
      Type '(this: AbortSignal, ev: Event) => any' is not assignable to type '(this: AbortSignal, ev: Event) => any'. Two different types with this name exist, but they are unrelated.
        The 'this' types of each signature are incompatible.
          Type 'AbortSignal' is not assignable to type 'AbortSignal'. Two different types with this name exist, but they are unrelated.
            Types of property 'onabort' are incompatible.
              Type '((this: AbortSignal, ev: Event) => any) | null' is not assignable to type '((this: AbortSignal, ev: Event) => any) | null'. Two different types with this name exist, but they are unrelated.
                Type '(this: AbortSignal, ev: Event) => any' is not assignable to type '(this: AbortSignal, ev: Event) => any'. Two different types with this name exist, but they are unrelated.
                  Types of parameters 'ev' and 'ev' are incompatible.
                    Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.
                      Types of property 'currentTarget' are incompatible.
                        Type 'EventTarget | null' is not assignable to type 'EventTarget | null'. Two different types with this name exist, but they are unrelated.
                          Type 'EventTarget' is not assignable to type 'EventTarget'. Two different types with this name exist, but they are unrelated.
                            Types of property 'addEventListener' are incompatible.
                              Type '(type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions | undefined) => void' is not assignable to type '(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions | undefined) => void'.
                                Types of parameters 'callback' and 'listener' are incompatible.
                                  Type 'EventListenerOrEventListenerObject | null' is not assignable to type 'EventListenerOrEventListenerObject | null'. Two different types with this name exist, but they are unrelated.
                                    Type 'EventListener' is not assignable to type 'EventListenerOrEventListenerObject | null'.ts(2719)

My code looks like the following (with some details abbreviated):

const controller = new AbortController();
const response = await client.request({
  document: gql`...`,
  variables: { ... },
  signal: controller.signal, // typescript is complaining about this assignment with the above error
});

I'm not sure what I'm doing wrong here as I'm under the impression that graphql-request supports passing an AbortSignal per request (introduced in #303). One other detail to share is I have not assigned a top-level AbortSignal when I create my GraphQL client initially.

Reproduction Steps/Repo Link

1. Create graphql-request client instance
2. Create an AbortController instance.
3. Attempt await client.request({ signal: abortController.signal }) in TypeScript

[thedanchez]

Just resolved the issue. Turns out I was on an older version of graphql-request when I was doing the above (on 5.1.0). Updating to the latest 6.1.0 release fixed my issue 🎉