Network error: Unexpected token < in JSON at position 0 at new ApolloError

Question

const httpLink = createHttpLink({
  uri: 'http://localhost:3090/'
})

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

client.query({
  query: gql`
    query users {
        email
    }
  `,
})
  .then(data => console.log(data))
  .catch(error => console.error(error));

This query gives an error when fetching from client-side code but when i execute this query in browser on http://localhost:3090/graphql it fetches data correctly

Open network tab in developers console and tell us what `ApolloError` is. — StackedQ, Nov 08 '18 at 14:20
as you can see `Status Code` is 404(not found), which means given url is incorrect. — StackedQ, Nov 08 '18 at 14:35
Looks like your request is not answered with a JSON object but an HTML page `...`. Typically the case for unhandled errors, where you are served a default error page. Because you're connecting to the root URL, my guess is a 404? — Freek Wiekmeijer, Nov 08 '18 at 14:54

trixn · Accepted Answer · 2018-11-08T14:51:19.923

26

The graphql endpoint you are posting your queries to is missing the /graphql. So your server probably returns an html document containing the 404 error message that starts with < from <html.... Apollo tries to parse that as the query result and fails to do so.

Check that httpLink is actually localhost:3090/graphql.

Also the syntax of a query is either:

{
    users {
        email
    }
}

or if you want to name the query:

query Users {
    users {
        email
    }
}

edited Nov 08 '18 at 14:51

answered Nov 08 '18 at 14:37

trixn

15,761
2
38
55

@MukeshKumar please add the full error message to your question. – trixn Nov 08 '18 at 14:39
after adding /graphql ..? – Mukesh Kumar Nov 08 '18 at 14:41
@MukeshKumar Yes. I can't tell you why it fails without the message. – trixn Nov 08 '18 at 14:42
POST http://localhost:3090/graphql 400 (Bad Request) index.js:1452 Error: Network error: Response not successful: Received status code 400 at new ApolloError (ApolloError.js:58) at QueryManager.js:522 at QueryManager.js:982 at Array.forEach () at QueryManager.js:981 at Map.forEach () at QueryManager.broadcastQueries (QueryManager.js:977) at QueryManager.js:477 – Mukesh Kumar Nov 08 '18 at 14:42
@MukeshKumar I'm affraid that does not contain any helpful information. But I think that the syntax of your query is incorrect too. It must be just ``gql`{ users { email } }`` or ``qgl`query Users { users { email } }` ``. – trixn Nov 08 '18 at 14:48
Looks like a network issue. Check where your backend is serving from. I made the same mistake – tufac2 Nov 19 '21 at 07:28

score 1 · Answer 2 · answered Feb 19 '21 at 18:07

For posterity in case someone finds this in the future, another reason you might get this error is if your API is returning something other than JSON. https://medium.com/programmers-developers/one-simple-apollo-client-debugging-tip-youll-like-7877a97b9c16

I ran into this issue because the content type that was being returned from my API was text/plain rather than application/json. Apollo lets you specify a different body serializer in this case. https://www.apollographql.com/docs/link/links/rest/

score 0 · Answer 3 · answered Nov 28 '20 at 16:36

0

This happens when you do not define the path correctly in the queries files. This is a typechecking error when passing arguments

answered Nov 28 '20 at 16:36

Sagara Harasgama

87
1
2

score 0 · Answer 4 · answered Aug 30 '21 at 09:57

In my case this error was being thrown due to a trailing slash I had after the API URL. A possible fix would be checking your API URL properly and ensuring it is referencing the correct URL.

In my case, I only had to take out the trailing slash / after the URL.

score 0 · Answer 5 · answered Nov 12 '21 at 13:22

As @Trixn posted: "So your server probably returns an html document containing the 404 error message that starts with < from <html.... Apollo tries to parse that as the query result and fails to do so."

In my case, I did not put "http://" in the beginning of my URL, and this returned a HTML web page with an error message.

Also check that usually, you should use "https://"

score 0 · Answer 6 · answered Jan 19 '22 at 16:49

Make sure that you have configured the uri for httpLink and wsLink same. I have seen this error when I had different uris as below.

httpLink had uri : "http://localhost:4000" wsLink had uri: "ws://localhost:4000/graphql"

setting httpLink's uri to http://localhost:4000/graphql helped resolving the issue.

score 0 · Answer 7 · edited Jul 03 '22 at 10:40

0

In my case, I recieved the same error, when I switched from a create-react-app to a next JS app pointing to port 3000.The react app had some values saved to local storage (tokens). In my case all I had to do, was to clear the local storage for localhost:3000, and I got rid of the error.

edited Jul 03 '22 at 10:40

RBT

24,161
21
159
240

answered Jun 28 '22 at 08:48

Eldrige

21
4

Diego Gallardo · Answer 8 · 2022-08-10T14:52:26.970

0

In my case, there was a typo in my graphql endpoint url. I had added a few characters to the end by accident. I think it would be good practice to add a catch rule for this situation so it does not break the site, just does not show the content and posts error to console log.

edited Aug 10 '22 at 14:52

answered Aug 10 '22 at 14:52

Diego Gallardo

13
4

Network error: Unexpected token < in JSON at position 0 at new ApolloError

8 Answers8