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

Answer 1

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

Answer 2

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/