未处理的拒绝（错误）：Post 不能为空

Question

我正在使用 useMutation 错误处理方法处理错误，但是在我尝试通过 posting 一个空的 post 来测试错误处理后，它显示 UI 中的错误然后在应用程序中断后我得到了上面的错误。

const [createPost, { error }] = useMutation(CREATE_POST_MUTATION, {
variables: values,
update(proxy, result) {
  const data = proxy.readQuery({
    query: FETCH_POSTS_QUERY,
  });

  let newData = [...data.getPosts];
  newData = [result.data.createPost, ...newData];
  proxy.writeQuery({
    query: FETCH_POSTS_QUERY,
    data: {
      ...data,
      getPosts: {
        newData,
      },
    },
  });
  values.body = '';
}
});

''

{error && (
    <div className="ui error message" style={{ marginBottom: 20 }}>
      <ul className="list">
        <li>{error.graphQLErrors[0].message}</li>
      </ul>
    </div>
  )}

Answer 1

我在这里找到了我的解决方案

NOTE: While you can use the exposed error state to update your UI, doing so is not a substitute for actually handling the error. You must either provide an onError callback or catch the error in order to avoid warnings about an unhandled Promise rejection.

Answer 2

或者另一种方法是您可以禁用不会导致错误的按钮。除非正文中有文本，否则按钮不会激活。如果只有空格，它将不会激活。

<Button disabled={!values.body.trim()} type="Submit" color="teal">
  Submit
</Button>

未处理的拒绝（错误）：Post 不能为空

Unhandled Rejection (Error): Post must not be empty

reactjs

graphql

react-apollo

apollo-client