Network error: Unexpected token < in JSON at position 0

[talaltoukan]

When I run the server and try to create a draft I receive the following error:

ApolloError.js:43 Uncaught (in promise) Error: Network error: Unexpected token < in JSON at position 0 at new ApolloError (ApolloError.js:43) at Object.error (QueryManager.js:129) at SubscriptionObserver.error (zen-observable.js:178) at Object.error (index.js:34) at SubscriptionObserver.error (zen-observable.js:178) at httpLink.js:88

[ericxor61a0c0d]

I'm having the same issue

[frandiox]

Make sure your frontend is connected to the right endpoint in your server. I saw this because my frontend was trying to connect to /graphql while my backend was serving on /.

[talaltoukan]

Where does one see which endpoint the backend is serving on? In my server/src/index.js file I have the following:

const server = new GraphQLServer({
  typeDefs: './schema.graphql',
  resolvers,
  context: req => ({
    ...req,
    db: new Prisma({
      typeDefs: './generated/prisma.graphql',
      endpoint: process.env.PRISMA_ENDPOINT,
      debug: true,
      //secret: process.env.PRISMA_SECRET,
    }),
  }),
})

[frandiox]

@talaltoukan You can pass options to server.start({...}) with port, endpoint, etc. Something like {port: 4000, endpoint: '/'} will make the server available at http://localhost:4000/, and that's the URL you need to provide to your frontend.

[talaltoukan]

Sorry, I forgot to mention that I have this at the end of my file: server.start(({port: 3000, endpoint: process.env.PRISMA_SECRET}) => console.log('Server is running on http://localhost:3000'))

[fcolon]

This may or may not be helpful for some, but I was able to get past this error by doing: git clean -xfd, reinstalling dependencies, and running the project again.

Reminder: DO NOT FORGET to backup any key files you might accidentally delete from the git clean -xfd. You probably want to avoid scrambling to gather what was in your .env like I had to, for example.

[ziadrida]

This error is due to the endpoint setting being incorrect const httpLink = new HttpLink({ uri: "http://localhost:4000/graphql" //Meteor.absoluteUrl("graphql") }); const client = new ApolloClient({ link: httpLink, cache }); make sure your httpLink points to the correct value ( for example in my case it is "http://localhost:4000/graphql" )

[cmoses8626]

For the client on startup:

const client = new ApolloClient({
  uri: "http://localhost:4000"
});

And for server on startup, assuming server is your ApolloServer:

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

[AviIhej]

When I use: const client = new ApolloClient({ uri: "http://localhost:4000" });

I get an error saying: POST http://localhost:3000/[object%20Object] 404 (Not Found)

Any idea why I am getting this error?

[ziadrida]

I notice the 404 errors when there is something wrong with the graphql itself. Test it in the "playground" and see if it actually works.

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

[joshuarobs]

I had to add /graphql to the end of the url for mine to work on localhost, e.g. http://localhost:4000/graphql. This is for the client.

It says this on the server's app console: 🚀 Server ready at http://localhost:4000/graphql. So as @UnnitMetaliya said, the two values have to match.

[mwegter95]

I was running into this error in my coding bootcamp group project. We were using { setContext } from import { setContext } from "@apollo/client/link/context" to build our query link with auth headers, so the fix for us is we were missing a setting in the client side package.json file, the below "proxy" setting had to be set to match our graphql server link. Without the "proxy" property, it was sending the request to localhost:3000 instead of 3001

{
  "name": "tempo",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "dependencies": {
    "@apollo/client": "^3.5.10",
...

and here's an example of our authLink setup in our App.js.

const httpLink = createHttpLink({
  uri: "/graphql",
});

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem("id_token");
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

//link authLink and httpLink so every request retrieves the token
//and sets the request headers before making the request to the API.
const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});