react-apollo错误：网络错误：意外的令牌＆lt;在JSON的第1位

Question

我想通过Apollo向此服务器发送请求并获取查询：

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

const FeedQuery = gql query{ allFmr{ fmrId, name, studio, bedRm1, bedRm2, bedRm3, bedRm4 } } ` 但我面对这条错误信息：

未处理（在react-apollo：Apollo（FMRScreen）中）错误：网络错误：意外的令牌＆lt;在位置1的JSON中

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)

...

但我可以轻松打开＆＃34; http://mfapat.com/graphql/mfaapp/＆＃34;在我的浏览器中获取查询。有谁知道问题在哪里？

Answer 1

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:

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.

Answer 2

基于@eedrah的答案，我设法通过使用错误处理程序中间件始终将erros作为JSON返回来解决此问题，以便Apollo Client错误链接可以解析错误。 // 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);