Apollo-client: Calls are being made to localhost, instead of given uri, using new HttpLink()

[peterschriever]

Intended outcome:
Http calls go to https://actual-website.com/graphql/.

Actual outcome:
Http calls are being made to http://localhost:3000/graphql/.
Console errors:

POST http://localhost:3000/graphql 404 (Not Found)

Unhandled (in react-apollo:Apollo(DomainsView)) Error: Network error: Unexpected token < in JSON at position 0
    at new ApolloError (http://localhost:3000/main.js:39001:28)
    at ObservableQuery.currentResult (http://localhost:3000/main.js:38445:24)
    at GraphQL.dataForChild (http://localhost:3000/main.js:34830:62)
    at GraphQL.render (http://localhost:3000/main.js:34880:33)
    at http://localhost:3000/main.js:71999:21
    at measureLifeCyclePerf (http://localhost:3000/main.js:71279:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/main.js:71998:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/main.js:72025:32)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3000/main.js:71949:36)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3000/main.js:71927:10)

How to reproduce the issue:
In the following codesandbox I've loaded the exact same versions of apollo packages I use in my own app. The error also occurs here, except the url called seems to default to https://n7z74xx7oj.codesandbox.io/graphql, instead of the given https://qkv3mq9rp.lp.gql.zone/graphql. I also cannot seem to find the Authorization header in the requests.
https://codesandbox.io/s/n7z74xx7oj

Version

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

[peterschriever]

Apologies, it seems that I was using the wrong import statements;
What I had: import ApolloClient from 'apollo-boost';.
What fixed it for me (which is also what is written in the docs): import { ApolloClient } from 'apollo-client';.

Not sure how I got this wrong..

[mhabegger]

Got the same issue. Copied from https://github.com/apollographql/apollo-client#usage

[krystofbe]

Same for me. Copied. Maybe add a notice to https://github.com/apollographql/apollo-client#usage

[gningue]

Same for me too. Any solution ??

[peterschriever]

tldr try to import ApolloClient from the apollo-client package like so:
import { ApolloClient } from 'apollo-client'

Its been a while for me, but it seems that the instance of ApolloClient imported from the apollo-boost package differs from the version in the apollo-client package (import { ApolloClient } from 'apollo-client'), in such a way that using a HttpLink does not seem to work.

This might have something to do with the default configuration of the apollo-boost version. See the docs:

.. it will be configured with a few reasonable defaults such as our standard in-memory cache and a link to a GraphQL API at /graphql .

While overwriting the uri property still seems to work, adding a link does not. Perhaps someone can take a closer look at the code and/or docs to further clarify why this is. Reopened so someone can pick this up.

[hwillson]

Yes, this is definitely confusing, and is one of the main reasons why we're planning on getting rid of Apollo Boost in Apollo Client 3. To explain what's happening though: the default export of Apollo Boost gives you back an instance of Apollo Client, that is pre-configured with certain defaults. What you're actually getting back is a subclass of ApolloClient, but that fact is hidden as an internal implementation detail. Long story short, the default export from apollo-boost is not the same as the default export from apollo-client. The Apollo Boost version is intentionally more limited, since it's following the Pareto principle. To make matters more confusing however, the apollo-boost package also provides a named export for the full-blown ApolloClient class. So if you're using apollo-boost, you can actually do this:

import ApolloClient from 'apollo-boost'

• Gives you back the more limited Apollo Boost version of ApolloClient

import { ApolloClient } from 'apollo-boost'

• Gives you back the full blown Apollo Client version of ApolloClient

The named export is available in apollo-boost for backwards compatibility reasons, but needless to say this adds to the implementation confusion.

Since we already have dealing with this on our radar for Apollo Client 3, I'll close this issue here for now. Thanks!

[consolenaut]

I think this ticket might need re-opening, I don't think the original question got answered.

The answers in this thread suggest import { ApolloClient } from 'apollo-boost', but that gives us the full-blown client instead of the boost one, which would be import ApolloClient from 'apollo-boost'.

The original problem still stands that, using the boost ApolloClient, requests are being routed through to localhost instead of the supplied uri.

I've pasted my setup below just for reference, but it's pretty much identical to @peterschriever's :)

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  url: 'https:/HIDDEN/graphql',
  fetchOptions: { credentials: 'include' },
  request: operation => {
    const accessToken = localStorage.getItem('ACCESS_TOKEN');
    operation.setContext({ headers: { authorization: accessToken } });
  }
});

[consolenaut]

Ignore me, I noticed the typo url instead of uri, I'll go back to shouting at clouds and telling kids to get off my lawn! :)

[UnnitMetaliya]

For all those, who are still struggling for the same issue, here's something which might solve it.

First of all, the default ApolloClient function in const client = new ApolloClient(); takes some (optional) parameters.

If you don't specify any parameters and leave it blank, by default it considers host of your front-end client as its graphql uri.

Means it makes request to wrong place. For example, if your front-end app is hosted at localhost:3000, it will make request at localhost:3000/graphql, where your graphqli doesn't exist. Hence, the 404 error.

If you want to reproduce this, then follow this steps: Once error occurs, open dev tools, go to network, find the request throwing 404, in this case you will have to go to "XHR", you will find 404 for your graphql request. Notice the url where its trying to make calls. And, compare that url with where you are running your GraphiQL (your graphql server).

For me, my app was hosted at localhost:3001. And, my GraphiQL at localhost:3000.

In my case, I was getting 404 when app was making request at localhost:3001/graphiql, whereas it should make request at localhost:3000/graphiql, because that's where my server is running.

So, what's the workaround for this?

It's simple. As I said, ApolloClient() function takes some parameters. Your server uri is one of them.

In my case, doing this worked and my app was fetching data without any problem.

const client = new ApolloClient({
  uri: "http://localhost:3000/graphql" // or your graphql server uri
});

Figure out uri of your server and specify it in parameter. It should work.

[deathemperor]

For all those, who are still struggling for the same issue, here's something which might solve it.

First of all, the default ApolloClient function in const client = new ApolloClient(); takes some (optional) parameters.

If you don't specify any parameters and leave it blank, by default it considers host of your front-end client as its graphql uri.

Means it makes request to wrong place. For example, if your front-end app is hosted at localhost:3000, it will make request at localhost:3000/graphql, where your graphqli doesn't exist. Hence, the 404 error.

If you want to reproduce this, then follow this steps: Once error occurs, open dev tools, go to network, find the request throwing 404, in this case you will have to go to "XHR", you will find 404 for your graphql request. Notice the url where its trying to make calls. And, compare that url with where you are running your GraphiQL (your graphql server).

For me, my app was hosted at localhost:3001. And, my GraphiQL at localhost:3000.

In my case, I was getting 404 when app was making request at localhost:3001/graphiql, whereas it should make request at localhost:3000/graphiql, because that's where my server is running.

So, what's the workaround for this?

It's simple. As I said, ApolloClient() function takes some parameters. Your server uri is one of them.

In my case, doing this worked and my app was fetching data without any problem.

const client = new ApolloClient({
  uri: "http://localhost:3000/graphql" // or your graphql server uri
});

Figure out uri of your server and specify it in parameter. It should work.

except it doesn't. ApolloClient in apollo-boost keeps connecting to local graphql. Using import { ApolloClient } from 'apollo-client'; solves it.