我从 apollo 客户端的突变怎么会得到 400 错误，而我可以从操场上做到这一点？

Question

我有以下在操场上有效的突变。

mutation UpdateBoolean($newValue: Boolean!, $id: Int) {
  updateOneSetting(data: { darkMode: $newValue }, where: { id: $id }) {
    id
    darkMode
  }
}

// variables: {"id": 1, "newValue": false}

但是，当我从我的 apollo 客户端对 React 做同样的事情时，它不起作用，显示错误：Unhandled Rejection (Error): Network error: Response not successful: Received status code 400。

const UPDATE_BOOLEAN = gql`
  mutation UpdateBoolean($newValue: Boolean!, $id: Int!) {
    updateOneSetting(data: { darkMode: $newValue }, where: { id: 1 }) {
      id
      darkMode
    }
  }
`;

const ToggleLabel: React.FC<ToggleLabelProps> = (props: ToggleLabelProps) => {
  const id = 1;
  const [mutation] = useMutation(UPDATE_BOOLEAN);

  const onChange = (
    event: React.ChangeEvent<HTMLInputElement>,
    checked: boolean
  ) => {
    console.log(checked); // true
    mutation({ variables: { newValue: checked, id: id } });
  };
  ...
`;

我完全不确定错误指示什么？谁能给我一个建议？

编辑： 错误是：

Error: Network error: Response not successful: Received status code 400
    at new ApolloError (ApolloError.ts:46)
    at Object.error (QueryManager.ts:255)
    at notifySubscription (Observable.js:140)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.error (Observable.js:240)
    at observables.ts:15
    at Set.forEach (<anonymous>)
    at Object.error (observables.ts:15)
    at notifySubscription (Observable.js:140)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.error (Observable.js:240)
    at httpLink.ts:184

Answer 1

您可以通过在浏览器的开发工具中检查服务器的响应、检查挂钩返回的 error 对象或通过调用检查拒绝原因来查看请求失败的原因catch 通过调用 mutation() 返回的 Promise。最后一个你应该做的无论如何，这样你就可以处理执行操作导致的任何错误。

就是说，您的请求失败的原因是您定义了一个变量但未被使用 ($id)。您在操作中定义的任何变量都需要在该操作中至少使用一次。

我从 apollo 客户端的突变怎么会得到 400 错误，而我可以从操场上做到这一点？

How could my mutation from apollo client get 400 error, while I can do that from playground?

typescript

apollo

reactjs

graphql