How to Use Graffle in a Class-Based GraphQL Client & Set Custom Fetch method

[tuxado]

Hi Graffle Team,

I'm trying to integrate Graffle into a class-based GraphQL client to reuse the same Client, but I'm running into type compatibility issues. Specifically, when initializing the client using Graffle.create().transport({...}), I get the following TypeScript error:

Type 'ClientBase<{ name: "default"; scalars: RegistryEmpty; extensions: [TransportHttp<ConfigDefaults>]; transports: { registry: { http: { name: "http"; config: Configuration; configInit: ConfigDefaults; configDefaults: PartialOrUndefined<...>; requestPipelineOverload: RequestPipelineOverload; }; }; current: "http"; conf...' is not assignable to type 'ClientBase<Context, {}>'.

Here is a simplified version of my implementation:

import { Graffle } from "graffle";
import { Client } from "graffle/client";
import { Context } from "graffle/utilities-for-generated";

class GraffleGraphQL implements IClient {
  private client: Client<Context, {}>;

  constructor(config: { uri: string; headers?: Record<string, string> }) {
    this.client = Graffle.create().transport({
      url: config.uri,
      headers: config.headers || {},
    });
  }
  query = (operation)=> {}
  mutation = (operation)=> {}
}

I try generics class :

type TContext<T extends ConfigInit, C extends Context> = C & {
  [K in keyof C]: K extends keyof NormalizeConfigInit<C["input"] & T>
    ? NormalizeConfigInit<C["input"] & T>[K]
    : C[K];
} extends infer R
  ? R extends Context
    ? R
    : never
  : never;
// Define a type to transform the context after transport configuration
type WithTransport<
  C extends Context,
  K extends ClientTransports.GetNames<C["transports"]>,
  X extends undefined | C["transports"]["registry"][K]["config"] = undefined
> = {
  [_ in keyof C]: _ extends "transports"
    ? {
        registry: C["transports"]["registry"];
        current: K;
        configurations: keyof X extends never
          ? C["transports"]["configurations"]
          : {
              [configKey in keyof C["transports"]["configurations"]]: configKey extends K
                ? {
                    [configValueKey in keyof C["transports"]["configurations"][configKey]]: configValueKey extends keyof X
                      ? X[configValueKey]
                      : C["transports"]["configurations"][configKey][configValueKey];
                  } & X
                : C["transports"]["configurations"][configKey];
            };
      }
    : C[_];
} extends infer R
  ? R extends Context
    ? R
    : never
  : never;

class GraphQLClient<
  V extends Context,
  T extends ConfigInit,
  C extends TContext<T, V>,
  K extends ClientTransports.GetNames<C["transports"]>,
  X extends undefined | C["transports"]["registry"][K]["config"] = undefined,
  E extends object = {}
> {
  client: Client<C, E>;

  constructor() {
    this.client = Graffle.create<T>() as Client<C, E>;
  }

  // Create a method to configure the transport
  transport<
    K extends ClientTransports.GetNames<C["transports"]>,
    X extends undefined | C["transports"]["registry"][K]["config"] = undefined
  >(transportName: K, config: X) :  Client<WithTransport<C, K, X>, E>{
   

    const transportClient = this.client.transport<K, X>(
      transportName,
      config
    ) as Client<WithTransport<C, K, X>, E>;

    transportClient.anyware(async (context) => {
      return context.exchange();
    });

    return transportClient;
  }
}

but fail with error :

Property 'exchange' does not exist on type '{ [KeyType in keyof InferKeywordArguments_<InferSteps_<WithTransport<C, K, X>["requestPipelineDefinition"]["steps"], WithTransport<C, K, X>["requestPipelineDefinition"]>, InferSteps_<...> extends NonEmpty ? Awaited<...> : WithTransport<...>["requestPipelineDefinition"]["input"]>]: InferKeywordArguments_<...>[KeyType...'.ts(2339)

Additionally, I’d like to use a custom fetch function for requests (e.g., to handle retries, logging, etc.). How can I properly pass a custom fetch implementation to Graffle?

Could you please provide guidance on both the type compatibility issue and how to set a custom fetch function?

Thanks in advance for your help!