Apollo-link: uri not changing when set in createHttpLink and concated later on

Created on 21 Apr 2018 · 17Comments · Source: apollographql/apollo-link

Expected Behavior

I'd want the endpoint to be set to a different url, but no matter what I change the variable to, it always tries to POST to /graphql

const httpLink = createHttpLink({
  uri: 'http://localhost:8080/graphql',
});

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

Code copied from official docs: https://www.apollographql.com/docs/react/recipes/authentication.html#Header

Actual Behavior

It tries to post to /graphql and throws an error.

Issue Labels

[x] has-reproduction
[ ] feature
[ ] docs
[ ] blocking
[ ] good first issue

has-reproduction

Source

ar1a

👍12

Most helpful comment

Are you using correct package for ApolloClient? I was experiencing same issue, untill I figured out I was importing ApolloClient from 'apollo-boost' and not from 'apollo-client'

cobsa on 15 May 2018

👍26 🎉15 🚀7

All 17 comments

👍 Experiencing same issue.

rachid on 24 Apr 2018

I'm running into the same problem.

After a quick look at this it "seems" like the request on these lines are made before we set the context using the setter function in the example and that's why it's using the default context values for the uri.

But I could be wrong as I haven't looked into this more than maybe 15 minutes.

zimme on 9 May 2018

Thinking more about this I'm pretty sure I was wrong about this as the request in this case is just a copy of the operation object.

zimme on 9 May 2018

Are you using correct package for ApolloClient? I was experiencing same issue, untill I figured out I was importing ApolloClient from 'apollo-boost' and not from 'apollo-client'

cobsa on 15 May 2018

👍26 🎉15 🚀7

@cobsa, interesting I'll have a look

zimme on 15 May 2018

@cobsa ~Importing ApolloClient from apollo-client, so that wasn't the problem but I'll have a bit more time to look into this today so we'll see where we end up.~

Turned out it actually was that problem, one of my colleagues had already changed the code so it was importing from apollo-client instead and things are working.

zimme on 18 May 2018

@ar1a @rachid Can you confirm if you're also importing ApolloClient from apollo-boost and when changing to importing from apollo-client it works as expected?

zimme on 18 May 2018

I had the same issue, using apollo-client to import ApolloClient fixed it! but I am not sure if this will cause any issue .. I mean, what's the difference of ApolloClient between apollo-client and apollo-boost ?

hopewise on 21 May 2018

So I'm pretty sure this was the problem for all of us and that an update to the docs or fix the problem with importing ApolloClient from apollo-boost is the way to solve this.

zimme on 21 May 2018

I have burned few hours here only to discover that the request was on the same url of the page, which is a backend with no graphql installed!, however, the error I got was misleading.. it should say for example: graphql is not installed on the backend or invalid endpoint.. etc

What I was getting is:

[GraphQL error]: Message: Cannot query field "allStudents" on type "Query"., Location: [object Object], Path: undefined

hopewise on 21 May 2018

👍2

I just got badly burnt by this as well. The error message you get if you use Apollo Boost is completely useless, and gives no indication of what the problem actually is.

Renaming the ApolloClient from Apollo Boost to something like ApolloBoostClient so that it makes it clear it's not the same class would go a long way to help with this.

Haegin on 5 Jun 2018

👍1

Dears, can you share you full code.
I'm running the same issue, eventhough I try to import the client from apollo-client and not apollo-boost.

Thks

ghost on 1 Jan 2019

👍1

@jejesh26 I am too facing the same issue. Seems like whatever I give to ApolloClient as the uri argument, it tries to concatenate it to the base URL of my front-end.

I am also using the apollo-client package and would love to see a recent working example.

TAnas0 on 17 Jan 2019

Hello Everyone,
I don't know if my issue is relevant with the issue here, but i had the same error response,
When i was trying to perform a query with an argument!
And that was my solution!
example:

const GET_DATA = gql `
query getData($text: String!){
 getData(text: $text) {... [whatever Object Structure you have]}
}`

const apolloQuery (text){
 return ApolloClient.query({
 query: GET_DATA,
 variables: {text: text}
})
}

gpanagiotinos on 8 Mar 2019

I have burned few hours here only to discover that the request was on the same url of the page, which is a backend with no graphql installed!, however, the error I got was misleading.. it should say for example: graphql is not installed on the backend or invalid endpoint.. etc

What I was getting is:
[GraphQL error]: Message: Cannot query field "allStudents" on type "Query"., Location: [object Object], Path: undefined

Thanks @hopewise, you saved me few hours! I was making the same mistake 😂

karanisverma on 13 May 2019

Over a year later and I got burned by this. Searching so many issues and guides keep giving me the same problem. Importing ApolloClient from apollo-client instead of apollo-boost worked for me! I wasted at least 4-5 hours trying to fix this. Thanks!!