URQL - GraphQL how can I get response headers

Question

I would like to read an info set in http response header when I make a query to GraphQL server.

When I execute a query with urql client, I only get these infos :

/** Resulting data from an [operation]{@link Operation}. */
export interface OperationResult<Data = any> {
    /** The [operation]{@link Operation} which has been executed. */
    operation: Operation;
    /** The data returned from the Graphql server. */
    data?: Data;
    /** Any errors resulting from the operation. */
    error?: CombinedError;
    /** Optional extensions return by the Graphql server. */
    extensions?: Record<string, any>;
    /** Optional stale flag added by exchanges that return stale results. */
    stale?: boolean;
}

Is there a way to get response headers ?

https://stackoverflow.com/questions/71622252/using-response-of-urql can someone help me on this — Nodirbek, Mar 25 '22 at 19:37
https://stackoverflow.com/questions/71622252/using-response-of-urql Can someone help me on this — Nodirbek, Mar 25 '22 at 19:38

score 4 · Answer 1 · answered Feb 19 '21 at 12:51

4

You can use a fetch wrapper in the provided client (If it's global to your app) or on in a specific client in a component with the fetch option like this:

  const client = createClient({
    url: `https://example.org/graphql`,
    fetch: (...args) =>
      fetch(...args).then((response) => {
        const myHeader = response.headers.get('my-header');
        if (myHeader) {
          /* do stuff */
        }

        return response;
      }),
    fetchOptions: { credentials: 'include' },
    …
  });

answered Feb 19 '21 at 12:51

François Dispaux

726
6
9

This will raise me a cors error – Lucas Miguel Feb 28 '22 at 03:17
@LucasMiguel CORS error mainly comes from the backend, not front. You may need to allow queries from the app domain and/or add the custom header in the allowed headers? – François Dispaux Mar 07 '22 at 05:52

score 2 · Accepted Answer · answered May 19 '20 at 23:57

The short answer is, no, urql in its default behaviour does not expose the response headers of a request as can be seen here: https://github.com/FormidableLabs/urql/blob/master/packages/core/src/internal/fetchSource.ts#L23-L29 It's simply swallowed.

The long answer is, if your replace the fetchExchange with a custom implementation you can extract whatever information you want. Unfortunately that's obviously custom and some work, but on the other hand, urql allows for you to drill into its internals and swap this behaviour out.

I'm sorry but this is a wrong answer. See , you can simply wrap `fetch` to do whatever you want. — François Dispaux, Mar 07 '22 at 05:54

URQL - GraphQL how can I get response headers

2 Answers2