当 Graphiql 和 Altair 以完全相同的突变成功时，反应阿波罗返回 Null？

Question

我已经在我的django石墨烯GraphiQLendpoint上测试了这种突变，并通过Altair（graphql的邮递员）在我的apollo客户端所指向的完全相同的endpoint上进行了测试。我使用相同的格式运行相同的变异，它可以与GraphiQL和Altair一起工作-新的数据库条目。

通过react apollo，它不会产生错误，我的django控制台显示：[29/11/2017 01:51:08]“POST/graphql HTTP/1.1”200 75

然而，实际上没有什么击中数据库。我尝试了console.log查询，它打印了数据结构，但是它应该创建的对象只显示“null”。

我已经重建了两次，但没有用。这是牛郎星突变，如预期的那样工作：

mutation {
  leadCreate(
    newLead:{
      firstName: "Bob",
      lastName: "Dole",
      email: "[e-mail]",
      staff: "1"
    }) {
    lead {
      id
    }
  }
}

它在Altair中返回结果:

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

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

GraphiQL中的结果相同。

这是我的索引中的Apollo Link设置.js：

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！当按照建议发送“正确格式”表单后仔细查看响应时，我意识到“staff”常量是作为字符串提交的。不知道为什么我的后端没有抛出一个可见的错误，但在提交之前快速“parseInt(staff )”,它的工作！

Answer 1

最后注意到＜code＞ID 以字符串形式发送，石墨烯endpoint正在查找整数。只需将我的突变呼叫更改为这个即可：

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,
      },
    });