Skip to content

Bug in middleware docs #1349

@giaset

Description

@giaset

Perceived Problem

The middleware docs (https://github.com/graffle-js/graffle/blob/graphql-request/examples/other-middleware.ts) propose that we do the following if we want to add a custom header

const requestMiddleware: RequestMiddleware = async (request) => {
    return {
      ...request,
      headers: {
        ...request.headers,
        'x-auth-token': await getAccessToken(),
      },
    }
  }

However, in my case, request.headers is a HeadersInit object and it didn't seem like the spread operator was working correctly over that object (as a concrete example, I no longer had Content-Type: application/json going out on my requests...)

Ideas / Proposed Solution(s)

I was able to fix the issue by doing the following:

requestMiddleware: async request => {
    const oldHeaders = Object.fromEntries(request.headers?.entries());

    return {
      ...request,
      headers: {
        ...oldHeaders,
        'x-auth-token': await getAccessToken()
      }
    };
  }

It seems like the spread operator works just fine over this oldHeaders object and all the expected headers now show up in my requests (Content-Type: application/json, etc)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions