javascript - 执行 GraphQL 突变时 Firefox 中的 ApolloError

Question

我正在尝试按照此处找到的教程来创建一个简单的 Django + React + GraphQL 应用程序。我的查询按预期工作，但使用突变会导致ApolloError被抛出。

我添加用户的突变如下：

const CREATE_USER = gql`
  mutation createUser ($firstName: String!, $lastName: String!){
    createUser (firstName: $firstName, lastName: $lastName){
      id
      firstName
      lastName
  }
}
`;

我的变异函数如下：

export function CreateUser() {
    
  let firstName, lastName;
  const [createUser] = useMutation(CREATE_USER);
  
  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          createUser({ variables: {
            firstName: firstName.value,
            lastName: lastName.value
          } });    
          firstName.value = '';
          lastName.value = '';
          window.location.reload();      
        }}
        style = {{ marginTop: '2em', marginBottom: '2em' }}
        >     
        <label>First Name: </label>
        <input
          ref={node => {
            firstName = node;
          }}
        style={{ marginRight: '1em' }}
        />     
        <label>Last Name: </label>
        <input
          ref={node => {
            lastName = node;
          }}
          style={{ marginRight: '1em' }}
        />
        <button type="submit" style={{ cursor: 'pointer' }}>Add a User</button>
      </form>
    </div>
  );
}

尝试发送突变会导致开发者控制台中出现以下错误： Uncaught (in promise) Error: Network error: NetworkError when attempting to fetch resource.

createUser仔细检查调用堆栈后，在调用onSubmit属性时似乎发生了错误。我已经尝试清除缓存和 cookie。这段代码似乎也只在 Firefox 中存在问题，因为它在 Chromium 和 Edge 中都有效。

任何帮助，将不胜感激！

标签： javascriptreactjsfirefoxgraphql