Headers are not passed when using cross-fetch

Intended outcome: Passing custom headers along with my requests when using ApolloClient.

Actual outcome: When using cross-fetch the headers are not passed as expected.

How to reproduce the issue:

Consider a very simple client running on node.js:

const {
  ApolloClient,
  HttpLink,
  InMemoryCache,
  gql,
} = require("@apollo/client/core");
const { fetch } = require("cross-fetch");

const client = new ApolloClient({
  link: new HttpLink({ uri: "https://hookb.in/xYjbyaxeOLh0nNxxnWpY", fetch }),
  cache: new InMemoryCache(),
  headers: { hello: "world" },
});

client
  .query({
    query: gql`
      query {
        fart
      }
    `,
  })
  .then(console.log);

It’s set up to hit a temporary hookbin endpoint and pass along a hello HTTP header with value world. Hookbin receives the request, but there’s no custom headers received at all:

Versions

  System:
    OS: macOS 11.6
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 93.0
    Safari: 15.0
  npmPackages:
    @apollo/client: ^3.4.16 => 3.4.16 

[david-keefe]

The above solution is what we used and it works as expected.

[jerelmiller]

@samuela I’m curious, if you move the headers into the HttpLink options, does it work? It looks like we only do something with that headers value passed directly to ApolloClient when you provide no link. This would explain why you’re not seeing headers. That headers value passed directly to the client is mostly a convenience if you don’t pass a link to it.

Try this and see if you have better luck 🤞 :

const client = new ApolloClient({
  link: new HttpLink({ 
    uri: "https://hookb.in/xYjbyaxeOLh0nNxxnWpY", 
    headers: { hello: "world" },
    fetch 
  }),
  cache: new InMemoryCache(),
});