react-apollo Error: Network error: Unexpected token < in JSON at position 1

8
votes

I want to send a request to this server via Apollo and get a query :

const client = new ApolloClient({ link: new HttpLink({ uri:'http://mfapat.com/graphql/mfaapp/'}), cache: new InMemoryCache()
})

const FeedQuery = gql query{ allFmr{ fmrId, name, studio, bedRm1, bedRm2, bedRm3, bedRm4 } } ` But I'm facing this error message:

Unhandled (in react-apollo:Apollo(FMRScreen)) Error: Network error: Unexpected token < in JSON at position 1

at new ApolloError (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:109336:32)
at ObservableQuery.currentResult (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:109447:28)
at GraphQL.dataForChild (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:103192:66)
at GraphQL.render (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:103243:37)

....

But I can easily open "http://mfapat.com/graphql/mfaapp/" in my browser and get a query. Does anyone know where the problem is?

2
react-nativegraphqlapollo-client
This usually means that the response HTTP request contains HTML (or more generally XML). A reason for this might be that an error occurs on your server and the server responds with an error message designed to be viewed in a browser. This can be either your GraphQL server or a server / proxy in the middle. Open your browser network tab and inspect the network request to find further information about the error (e.g. in the response preview view). – Herku
Thank you Herku, I have a server for myself. In my server the GraphQL queries written with Django . And I wrote above code in mobile App. without any code in server side, Could this be the problem? Is it possible to install Apollo Server on server only without any code and get query with Apollo client in ReactNative app? Or I should write a code in server side? – Robinia
The url that you are using as the endpoint is the graphiql interface, so you are seeing the html come back for it. You need an endpoint for your graphql server as well that will handle the graphql requests and resolve them. – Norm Crandall
Thanks Norm, I used graphene for server side, Should I write a code such as this github.com/apollographql/apollo-tutorial-kit for my server? – Robinia
The above graphiql endpoint also serves the graphql requests. Make sure you send the Accept:application/json request header. – Herku

2 Answers

1
votes

Right now, Apollo treats everything sent from the server as JSON. However, if there is an error, then your server might be sending HTML to show a basic error page.

To see the error, open your dev tools, and look at the network tab. This shows an example 401 error:

401 error in dev tools

As you can see, if you were to parse this as JSON you would stumble over the first character: < which is where our error message comes from.

Reading the specific error sent enables you to fix the bug.

To fix the general error, configure your server to send JSON on HTTP errors, not HTML code. This should allow Apollo to parse it and display a sensible error page.

EDIT: Also see this discussion - hopefully they will change the default Apollo behavior, or at least provide useful discussion.

1
votes

Base on @eedrah answer, I managed to resolve this issue by using an error handler middleware to always return erros as JSONs, so that Apollo Client error link can parse the errors. // On Apollo server // Error handler const errorHandler = (err, req, res, next) => { if (res.headersSent) { return next(err); } const { status } = err; res.status(status).json(err); }; app.use(errorHandler);