Question

我在服务器上使用GraphQL和mongoose。

当发生验证错误时，GraphQL突变会发送状态代码为200的响应。在客户端，响应如下所示：

{
  "data": null,
  "errors": [{
    "message": "error for id...",
    "path": "_id"
  }]
}

我希望使用apollo-client变异承诺的catch功能来访问验证错误。类似的东西：

      this.props.deleteProduct(this.state.selectedProductId).then(response => {
         // handle successful mutation
      }).catch(response => {
         const errors = response.errors; // does not work
         this.setState({ errorMessages: errors.map(error => error.message) });
      });

如何做到这一点？

Answer 1

@stubailo之前的回答似乎并未涵盖所有用例。如果我在服务器端代码上抛出错误，响应代码将不同于200，错误将使用Cordova CLI: 6.5.0 Ionic Framework Version: 3.6.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 2.0.2 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v6.10.0 Xcode version: Not installed处理，而不是使用.catch()。

Link关于GitHub的问题。

最好的办法是处理.then()和.then()上的错误。

.catch()

Answer 2

注意：这个答案（可以说是整个问题）现在已经过时了，因为在更新版本的Apollo Client中，catch出现了突变错误。

突变中的GraphQL错误当前显示在errors内的响应的then字段中。我认为肯定有人声称他们应该出现在catch中，但这里有一段来自GitHunt的变异：

// The container
const withData = graphql(SUBMIT_REPOSITORY_MUTATION, {
  props: ({ mutate }) => ({
    submit: repoFullName => mutate({
      variables: { repoFullName },
    }),
  }),
});

// Where it's called
return submit(repoFullName).then((res) => {
  if (!res.errors) {
    browserHistory.push('/feed/new');
  } else {
    this.setState({ errors: res.errors });
  }
});

Answer 3

使用graphql标签符号，您可以访问错误：

<Mutation mutation={UPDATE_TODO} key={id}>
        {(updateTodo, { loading, error }) => (
          <div>
            <p>{type}</p>
            <form
              onSubmit={e => {
                e.preventDefault();
                updateTodo({ variables: { id, type: input.value } });

                input.value = "";
              }}
            >
              <input
                ref={node => {
                  input = node;
                }}
              />
              <button type="submit">Update Todo</button>
            </form>
            {loading && <p>Loading...</p>}
            {error && <p>Error :( Please try again</p>}
          </div>
        )}
      </Mutation>

https://www.apollographql.com/docs/react/essentials/mutations.html

Apollo客户端变异错误处理

3 个答案: