How to access response object when there is no error

[dagadbm]

Hello everyone,

I currently have a header that the graphQL server I am using sends that contains a request Id.
I want to be able to log this so i can back track when I have issues.
Right now I have a generic errorExchange for this but sometimes we can also have applicational errors that are not really graphQL errors (so the error object on OperationResult will be null).
How can I access the response of the CombinedError when i have no error?

[JoviDeCroock]

Generally the GraphQL spec would advise to put these into extensions which would be available there.

[dagadbm]

I am still fairly new to graphQL unfortunately.

You are saying the graphQL server should put this on that extensions field then.

I will let the back-end developer know.

Stilll how would I go about getting the fetch response if its a success ? Like coding myself a custom exchange using urql?

[dagadbm]

Because this AbortController is a global entity right? I would I even use it outside of your codebase?
wont typeof AbortController return always undefined?
I searched for AbortController on your repo but I didn't really see any reference to it anywhere except here

[JoviDeCroock]

AbortController is part of the browser https://caniuse.com/abortcontroller it just checks whether the current browser support it.

[dagadbm]

damn... well i had no idea about this! TIL. im gonna mark this as resolved with my code if someone needs to do this eventually.
Thank you very much for your support I rarely ask for it and when I do I am amazed at the kindness of everyone. Thank you :)

[kitten]

I think I'll flag this as a potential page for the docs as people will almost certainly diverge from the defacto GraphQL over HTTP spec and constraints in rare cases and we do have the internals structured for reuse

[dagadbm]

it was actually the first time I had to use internal stuff from libraries. I never stoped to think in the end its just a folder so there is nothing stoping me from importing wathever I want.

Its one of the things on the Utilities page for example that i was like: wtf do I want this for? It is still not so obvious to me and I dont want to derail this any longer but Im basically using graphQL and I have 0 benefits from it, no typescript, no nothing, I just have to do everything by hand user voyager which the back-end dev provided.

The ecosystem is so huge Im at a loss on what would best fit my use case.

Either way, thanks again!

[dagadbm]

pasting here my final version of the code (js only)

import {
  make,
  filter,
  merge,
  mergeMap,
  pipe,
  share,
  takeUntil,
  onPush,
} from 'wonka';

import {
  makeFetchBody,
  makeFetchURL,
  makeFetchOptions,
} from '@urql/core/internal';

import { makeResult, makeErrorResult } from '@urql/core';

const executeFetch = (
  operation,
  url,
  fetchOptions,
) => {
  const fetcher = operation.context.fetch;

  let statusNotOk = false;
  let response;
  let requestId;

  return (fetcher || fetch)(url, fetchOptions)
    .then((res) => {
      statusNotOk = res.status < 200
        || res.status >= (fetchOptions.redirect === 'manual' ? 400 : 300);
      response = res;
      requestId = res.headers.get('X-Request-ID') || 'n/a';
      return res.json();
    })
    .then((res) => {
      if (!('data' in res) && !('errors' in res)) {
        throw new Error('No Content');
      }

      return Object.assign(makeResult(operation, res, response), {
        extensions: {
          ...result.extensions,
          requestId,
        },
      });
    })
    .catch((error) => {
      if (error.name !== 'AbortError') {
        return Object.assign(makeErrorResult(
          operation,
          statusNotOk ? new Error(response.statusText) : error,
          response), {
          extensions: {
            ...result.extensions,
            requestId,
          },
        });
      }
    });
};

const makeFetchSource = (
  operation,
  url,
  fetchOptions,
) => make(({ next, complete }) => {
  let ended = false;

  Promise.resolve()
    .then(() => {
      if (!ended) {
        return executeFetch(operation, url, fetchOptions);
      }
    })
    .then((result) => {
      if (!ended) {
        ended = true;
        if (result) {
          next(result);
        }
        complete();
      }
    });

  return () => {
    ended = true;
  };
});

export default function fetchExchange({ forward, dispatchDebug }) {
  return (ops$) => {
    const sharedOps$ = share(ops$);
    const fetchResults$ = pipe(
      sharedOps$,
      filter(operation => operation.kind === 'query' || operation.kind === 'mutation'),
      mergeMap((operation) => {
        const { key } = operation;
        const teardown$ = pipe(
          sharedOps$,
          filter(op => op.kind === 'teardown' && op.key === key),
        );

        const body = makeFetchBody(operation);
        const url = makeFetchURL(operation, body);
        const fetchOptions = makeFetchOptions(operation, body);

        dispatchDebug({
          type: 'fetchRequest',
          message: 'A fetch request is being executed.',
          operation,
          data: {
            url,
            fetchOptions,
          },
        });

        return pipe(
          makeFetchSource(operation, url, fetchOptions),
          takeUntil(teardown$),
          onPush((result) => {
            const error = !result.data ? result.error : undefined;

            dispatchDebug({
              type: error ? 'fetchError' : 'fetchSuccess',
              message: `A ${
                error ? 'failed' : 'successful'
              } fetch response has been returned.`,
              operation,
              data: {
                url,
                fetchOptions,
                value: error || result,
              },
            });
          }),
        );
      }),
    );

    const forward$ = pipe(
      sharedOps$,
      filter(operation => operation.kind !== 'query' && operation.kind !== 'mutation'),
      forward,
    );

    return merge([fetchResults$, forward$]);
  };
}