当 Graphiql 和 Altair 以完全相同的突变成功时，React Apollo 返回 Null？

Question

我已经在我的 django-graphene GraphiQL 端点上测试了这个突变，并通过 Altair（graphql 的邮递员）在我的 apollo 客户端指向的完全相同的端点上对其进行了测试。我以相同的格式运行相同的突变，它适用于 GraphiQL 和 Altair - 新的数据库条目。

通过react-apollo，它不会产生错误，我的django控制台打印：[29/Nov/2017 01:51:08] "POST /graphql HTTP/1.1" 200 75

但实际上没有任何东西影响到数据库。我尝试了 console.log 查询，它打印了数据结构，但它应该创建的对象只是说“null”。

我已对其进行了两次重建，但均无济于事。这是按预期工作的 Altair 突变：

mutation {
  leadCreate(
    newLead:{
      firstName: "Bob",
      lastName: "Dole",
      email: "BobDole@graphql.com",
      staff: "1"
    }) {
    lead {
      id
    }
  }
}

在 Altair 中返回结果：

STATUS: OK  STATUS CODE: 200 TIME SPENT: 641ms

{
 "data": {
  "leadCreate": {
   "lead": {
    "id": "2773"
   }
  }
 }
}

GraphiQL 中的结果相同。

这是我在 index.js 中的 Apollo Link 设置：

const httpLink = createHttpLink({
  uri: 'http://localhost:8000/graphql',
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root'),
);
registerServiceWorker();

我应该注意到我的所有查询都能正常工作，所以我相当有信心以上都是正确的。

这是我的 LeadQuickCreate.js 组件：

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { Button, Input } from 'antd';
import { USER_ID } from '../../Utilities/constants';

class LeadQuickCreate extends Component {
  state = {
    firstName: '',
    lastName: '',
    phone: '',
    email: '',
  };

  createLink = async () => {
    const staff = localStorage.getItem(USER_ID);
    const {
      firstName, lastName, phone, email,
    } = this.state;
    const newLead = await this.props.createQuickLead({
      variables: {
        firstName,
        lastName,
        phone,
        email,
        staff,
      },
    });
    console.log('NewLead = ', newLead);
  };

  render() {
    const {
      firstName, lastName, phone, email,
    } = this.state;
    return (
      <div>
        <div>
          <Input
            value={firstName}
            onChange={e => this.setState({ firstName: e.target.value })}
            type="text"
            placeholder="Lead's First Name"
          />
          <Input
            value={lastName}
            onChange={e => this.setState({ lastName: e.target.value })}
            type="text"
            placeholder="Lead's Last Name"
          />
          <Input
            value={phone}
            onChange={e => this.setState({ phone: e.target.value })}
            type="text"
            placeholder="Lead's Phone Number"
          />
          <Input
            value={email}
            onChange={e => this.setState({ email: e.target.value })}
            type="text"
            placeholder="Lead's email address"
          />
        </div>
        <Button type="primary" onClick={() => this.createLink()}>
          Submit
        </Button>
      </div>
    );
  }
}

const CREATE_QUICK_LEAD = gql`
  mutation CreateQuickLead(
    $firstName: String!
    $lastName: String
    $phone: String
    $email: String
    $staff: ID!
  ) {
    leadCreate(
      newLead: {
        firstName: $firstName
        lastName: $lastName
        phone: $phone
        email: $email
        staff: $staff
      }
    ) {
      lead {
        id
      }
    }
  }
`;

export default graphql(CREATE_QUICK_LEAD, { name: 'createQuickLead' })(LeadQuickCreate);

当我点击提交按钮时，控制台日志会打印：

{data: {…}}
  data:
   leadCreate:
    lead: null 
    __typename: "LeadSerializerMutation"

等等

所以我被困住了。关于它在哪里迷路的任何想法？

谢谢！

编辑：Egads！在按照建议发送“正确格式”表单后仔细查看响应时，我意识到“员工”常量是作为字符串提交的。不知道为什么我的后端没有抛出可见的错误，而是在提交之前快速“parseInt(staff)”并且它可以工作！

Answer 1

终于注意到预期的ID! 是作为字符串发送的，而石墨烯端点正在寻找一个整数。只需将我的突变调用更改为此有效：

createLead = async values => {
    const { firstName, lastName, phone, email, } = values;
    let staff = localStorage.getItem(USER_ID);
    staff = parseInt(staff);

    const newLead = await this.props.createQuickLead({
      variables: {
        firstName,
        lastName,
        phone,
        email,
        staff,
      },
    });