feat: added middleware support

[avsokolov]

Add the ability to provide simple client middleware for common request and response handling. It can be useful for logging, requests tracing, errors handling etc. when used singe client in a large app.

[vitorcamachoo]

Hi,
is this possible to add headers on request middleware ?

[suds-sky]

I am looking for a feature that exactly does this, is there a reason why it is not looked into for more than an year. It would be good to get this in unless there is an alternative solution available

[jasonkuhrt]

New PRs welcome if this one has stalled

[suds-sky]

Thanks @jasonkuhrt, @avsokolov Do you want to rebase your branch from master so that we can get this reviewed and get it merged. If you don't find time then I am happy to create a new PR

[vrecan]

@suds-sky Anyway we could get this merged in? I wanted to send logs to APM (elastic) when we get errors and the only way to do that is to wrap graphql-request. This is going to be really fragile and I would love to do it as middleware instead.

import { GraphQLClient } from 'graphql-request/';
import * as Dom from 'graphql-request/types.dom';
import {
  GraphqlQuery,
  Variables,
  RequestDocument,
  GraphqlMutation,
  BatchRequestDocument,
} from 'graphql-request/types';
import { apm } from '@elastic/apm-rum';


// CustomGraphqQLClient is required because middleware is not supported as of writing this. There is a pr
// 
class CustomGraphQLClient {
  private client: GraphQLClient;

  constructor(private url: string, private options?: Dom.RequestInit) {
    this.client = new GraphQLClient(url, options);
  }
  request<T = any, V = Variables>(
    document: RequestDocument,
    variables?: V,
    requestHeaders?: Dom.RequestInit['headers']
  ): Promise<T> {
    return this.makeRequest(document, variables);
  }

  rawRequest<T = any, V = Variables>(
    query: string,
    variables?: V,
    requestHeaders?: Dom.RequestInit['headers']
  ): Promise<T> {
    return new Promise((resolve, reject) => {
      this.rawRequest(query, variables, requestHeaders)
        .then(resolve)
        .catch((err: any) => {
          console.error(err);
          apm.captureError(err);
          return reject(err);
        });
    });
  }

  batchRequests<T extends any = any, V = Variables>(
    documents: BatchRequestDocument<V>[],
    requestHeaders?: Dom.RequestInit['headers']
  ): Promise<T> {
    return new Promise((resolve, reject) => {
      this.batchRequests(documents, requestHeaders)
        .then(resolve)
        .catch((err: any) => {
          console.error(err);
          apm.captureError(err);
          return reject(err);
        });
    });
  }

  setHeaders(headers: Dom.RequestInit['headers']): GraphQLClient {
    return this.setHeaders(headers);
  }

  setHeader(key: string, value: string): GraphQLClient {
    return this.setHeader(key, value);
  }

  setEndpoint(value: string): GraphQLClient {
    return this.setEndpoint(value);
  }

  query<T = GraphqlQuery, V = Variables>(
    document: RequestDocument,
    variables?: V
  ): Promise<T> {
    return this.makeRequest<T, V>(document, variables);
  }

  mutation<T = GraphqlMutation, V = Variables>(
    document: RequestDocument,
    variables?: V
  ): Promise<T> {
    return this.makeRequest<T, V>(document, variables);
  }

  private makeRequest<T = GraphqlQuery, V = Variables>(
    document: RequestDocument,
    variables?: V
  ): Promise<T> {
    return new Promise((resolve, reject) => {
      this.client
        .request(document, variables)
        .then(resolve)
        .catch((err: any) => {
          console.error(err);
          apm.captureError(err);
          return reject(err);
        });
    });
  }
}

export const graphqlClient = new CustomGraphQLClient(
  import.meta.env.VITE_API_ENDPOINT,
  {
    credentials: 'include',
  }
) as unknown as GraphQLClient;

[jasonkuhrt]

@suds-sky probably a new PR

[AshotN]

Was there something wrong with this PR that it never got merged?

[jasonkuhrt]

@AshotN The author became unresponsive. I never looked closely at the PR.

[avsokolov]

Sorry, I forgot about the merge request. But anyway it's still actual for me.

@jasonkuhrt What should I do to actualize and merge it?

[jasonkuhrt]

@avsokolov Thanks for checking in. I'll take a look some time next week hopefully now that I know you're still active.

[jasonkuhrt]

Can you add some docs, otherwise LGTM

[jasonkuhrt]

LGTM, just one doc typo.

[avsokolov]

@jasonkuhrt I have rebased to the latest master and added docs. Please review it