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

user_4846617 0
Viewed 32669

enter image description here 

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

apollo graphql reactjs express javascript
8 Answers

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

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/

user_103395180

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

user_88687320

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.

user_112199790

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://"

user_81848600

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.

user_179763620

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.

user_136471230

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.

user_197363250
Related