我正在使用Apollo-client,我不明白为什么调试我的错误很难: 我正在尝试对我的石墨烯python实现GraphQL执行mutate调用。最终得到400错误代码,我无法检索信息。
例如:当我在/ graphQL接口上尝试我的graphene服务时,它会将有用的错误作为错误输入或错误的方法名称返回给我。 在这里,在apollo客户端,它只给我一个400代码错误。这对我没有任何帮助。那么有可能从我的apolo客户端获取石墨烯的错误信息,而不是无用的400代码错误吗?
这是一个例子,来自我的石墨烯界面(/ graphQL):
mutation myMutation {
uploadFile(input:"") {
success
}
}
将输出:
{
"errors": [
{
"message": "Argument \"input\" has invalid value \"\".\nExpected \"UploadFileMutationInput\", found not an object.",
"locations": [
{
"column": 20,
"line": 2
}
]
}
]
}
当我在apollo客户端(js)上尝试相同时:
client.mutate({
mutation: gql`
mutation($file: Upload!) {
uploadFile(input: $file) {
success
}
}
`,
variables: { file } })
.then(console.log)
.catch((e) => { console.log("catch", e) })
我明白了
Error: Network error: Response not successful: Received status code 400
我的捕获从未被调用过,文档根本没有帮助我。
我想要的是获取我的调用的突变细节错误:当我使用不正确的方法调用或错误的输入类型时,我不应该没有任何关于使我的请求变坏的信息。
答案 0 :(得分:9)
Error
和console.log
惊喜当尝试使用console.log
来查看错误时,您可能会惊讶地看到所有可用的错误数据。这是因为console.log
以一种特殊的方式对待作为内置Error
类实例的值,仅打印消息,类型和堆栈。
Apollo从内置Error
类扩展了自己的错误。可以通过以下方式轻松测试:
const error = apolloError // from async try/catch, onError method, or a promise .catch
console.log(error instanceof Error);
// --> true
从Error
扩展时,Apollo会将自己的数据添加到对象中。但是错误仍然是Error
的实例,因此console.log将仅显示有限的信息,
console.log(error);
// output:
// Error: Network error: Response not successful: Received status code 400
// at ...
// at ...
// at ...
如果您知道要查找的位置,则可以对错误对象进行属性查找。例如,您可以登录error.networkError.result.errors
。这种方法可能太过外科手术,导致对所有出错地方的了解不完整。
或者,我们可以在错误对象上使用JSON.stringify
,所有数据将被打印到控制台上,
// tip: use stringify's formatting options for better readability
console.log(JSON.stringify(error, null, 2));
{
"graphQLErrors": [],
"networkError": {
"name": "ServerError",
"response": {},
"statusCode": 400,
"result": {
"errors": [...here you will find what you're looking for]
}
},
"message": "Network error: Response not successful: Received status code 400",
"name": "Error",
"stack": "...same as before"
}
您一眼就能知道出了什么问题。
答案 1 :(得分:7)
实例化ApolloClient
时应使用以下链接:https://www.npmjs.com/package/apollo-link-error。它应该在其他链接之前,例如:
import { ApolloClient, ApolloLink } from 'apollo-boost'
import { onError } from 'apollo-link-error'
const errorLink = onError(({ graphQLErrors }) => {
if (graphQLErrors) graphQLErrors.map(({ message }) => console.log(message))
})
new ApolloClient({
...
link: ApolloLink.from([errorLink, authLink, restLink, httpLink]),
})
答案 2 :(得分:3)
此解决方案为我解决了此问题:
const client = new ApolloClient({
uri: 'http://localhost:4444/graphql',
onError: ({ networkError, graphQLErrors }) => {
console.log('graphQLErrors', graphQLErrors)
console.log('networkError', networkError)
}
})
答案 3 :(得分:0)
在我的情况下,查询中有错字。 但是它最终出现了400错误。
要调试这种情况,您可以简单地使用以下代码:
function query() {
try {
/**
* DO QUERY
*/
} catch (e) {
// Here you can catch any errors from Apollo Error.
console.log(e.networkError.result.errors);
}
}
提示:GraphQL错误不会总是以graphQLErrors
结尾,因此最好将网络错误与graphql错误一起检查。
要查看GraphQL错误:console.log(e.graphQLErrors);
请注意,graphQLErrors
将是一个数组。
这是一个完整的例子:
async function userQueryInterface(userid = '1234', usermail = 'test@test.test') {
try {
let users = await client.query({
query: gql`
query GetUsers($userid: ID!, $usermail: String) {
getUsers(vlanid: $userid, usermail: $usermail) {
_id
mail
}
}
`,
variables: { userid, usermail }
});
return users.data.getUsers;
} catch (e) {
console.log(e.networkError.result.errors); // here you can see your network
}
}
答案 4 :(得分:-1)
我设法直接在客户端配置中放置onError
函数(graphQLErrors
在变异中执行时始终为空):
const client = new ApolloClient({
uri: 'http://localhost:3000/graphql',
onError: (e) => { console.log(e) },
});