CODEWITHSUNDEEP
reactjsgraphqlapollo-client
Joff
Joff

Reputation: 12177

Apollo Client not sending headers to API endpoint

I've got an Apollo Client that I am trying to hookup to a graphql server for the first time. I can't seem to get it to send any headers...

My component that instantiates the apollo client looks like this...

const cache = new InMemoryCache();

const stateLink = withClientState({ resolvers, cache, apolloState });
const httpLink = new HttpLink({
  uri: urls.graphqlServer + urls.graphqlEndpoint,
  options: {
    credentials: 'include',
    headers: {
      authorization: 'bearer token',
      'X-CSRF-Token': 'sakldjsalkj',
      'Custom-Header': 'my header'
    }
  }
});

const client = new ApolloClient({
  cache,
  link: ApolloLink.from([stateLink, httpLink]),
  connectToDevTools: true
});

window.__APOLLO_CLIENT__ = client;

return (
  <ApolloProvider client={client}>
    <Root />
  </ApolloProvider>
);

and then the headers don't include anything that I set...

:authority:localhost:8080
:method:OPTIONS
:path:/graphql
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.9,ko;q=0.8,zh-CN;q=0.7,zh;q=0.6
access-control-request-headers:content-type
access-control-request-method:POST
origin:http://localhost:8000
referer:http://localhost:8000/app
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

Any idea how to fix this?

Upvotes: 1

Views: 3199

Answers (1)

Locco0_0
Locco0_0

Reputation: 3500

You added the options for the headers in the wrong "options" object. Take a look at the docu.

It should work when you change your apollo http link to:

....

const httpLink = new HttpLink({
  uri: urls.graphqlServer + urls.graphqlEndpoint,
  credentials: 'include',
  headers: {
    authorization: 'bearer token',
    'X-CSRF-Token': 'sakldjsalkj',
    'Custom-Header': 'my header'
  }
});

...

Upvotes: 4

Related Questions