Question

我在我的django-graphene GraphiQL端点上测试了这个突变，并在我的apollo客户端指向的完全相同的端点上通过Altair（graphman的postman）测试了它。我使用相同的格式运行相同的变异，它适用于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！在按照建议发送“正确格式”表单后仔细检查响应时，我意识到“staff”const是以字符串形式提交的。不知道为什么我的后端没有抛出明显的错误，但在提交之前快速“parseInt（工作人员）并且它有效！

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

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

1 个答案: