uri not changing when set in createHttpLink and concated later on

[ar1a]

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

• has-reproduction
• feature
• docs
• blocking
• good first issue

[rachid]

👍 Experiencing same issue.

[zimme]

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]

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.

[cobsa]

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'

[zimme]

@cobsa, interesting I'll have a look

[zimme]

@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]

@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?

[hopewise]

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 ?

[zimme]

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.

[hopewise]

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

[Haegin]

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.

[ghost]

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

[TAnas0]

@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.

[gpanagiotinos]

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}
})
}

[karanisverma]

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 😂

[lvilluminati]

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!!

[ar1a]

Seems like this can be closed then! Solution