support Headers being passed in fetchOptions

.changeset/fluffy-poets-protect.md

@@ -0,0 +1,5 @@
+---
+'@urql/core': patch
+---
+
+Correctly support the `Headers` class being used in `fetchOptions`

packages/core/src/internal/fetchOptions.test.ts

@@ -107,6 +107,30 @@ describe('makeFetchOptions', () => {
  `);
  });
 
+ it('handles the Headers object', () => {
+ const headers = new Headers();
+ headers.append('x-test', 'true');
+ const operation = makeOperation(queryOperation.kind, queryOperation, {
+ ...queryOperation.context,
+ fetchOptions: {
+ headers,
+ },
+ });
+ const body = makeFetchBody(operation);
+
+ expect(makeFetchOptions(operation, body)).toMatchInlineSnapshot(`
+ {
+ "body": "{\\"operationName\\":\\"getUser\\",\\"query\\":\\"query getUser($name: String) {\\\\n user(name: $name) {\\\\n id\\\\n firstName\\\\n lastName\\\\n }\\\\n}\\",\\"variables\\":{\\"name\\":\\"Clara\\"}}",
+ "headers": {
+ "accept": "application/graphql-response+json, application/graphql+json, application/json, text/event-stream, multipart/mixed",
+ "content-type": "application/json",
+ "x-test": "true",
+ },
+ "method": "POST",
+ }
+ `);
+ });
+
  it('creates a GET request when preferred for query operations', () => {
  const operation = makeOperation(queryOperation.kind, queryOperation, {
  ...queryOperation.context,

packages/core/src/internal/fetchOptions.ts

@@ -129,9 +129,18 @@ export const makeFetchOptions = (
  (typeof operation.context.fetchOptions === 'function'
  ? operation.context.fetchOptions()
  : operation.context.fetchOptions) || {};
- if (extraOptions.headers)
- for (const key in extraOptions.headers)
- headers[key.toLowerCase()] = extraOptions.headers[key];
+ if (extraOptions.headers) {
+ if (extraOptions.headers.forEach) {
+ (extraOptions.headers as Headers).forEach((value, key) => {
+ headers[key] = value;
+ });
+ } else {
+ for (const key in extraOptions.headers) {
+ headers[key.toLowerCase()] = extraOptions.headers[key];
+ }
+ }
+ }
+
  const serializedBody = serializeBody(operation, body);
  if (typeof serializedBody === 'string' && !headers['content-type'])
  headers['content-type'] = 'application/json';