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

Posted 2023-02-21

【中文标题】当 Graphiql 和 Altair 以完全相同的突变成功时，React Apollo 返回 Null？

【英文标题】：React Apollo returning Null when Graphiql and Altair succeed with exact same mutation?

【发布时间】：2018-05-12 21:02:33

【问题描述】：

我已经在我的 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: "[e-mail]",
      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)”并且它可以工作！

【问题讨论】：

您是否检查过 Chrome 开发工具中网络选项卡下的 XHR 请求？您是否看到请求（您应该能够看到，因为它记录在服务器端），格式是否正确（即正文是否与您使用 GraphiQL 或 Altair 发送的内容相对应）？

"operationName":"CreateQuickLead","variables":"firstName":"Test","lastName":"test","phone":"test","email":"test","staff":"1","query":"mutation CreateQuickLead($firstName: String!, $lastName: String, $phone: String, $email: String, $staff: ID!) \n leadCreate(newLead: firstName: $firstName, lastName: $lastName, phone: $phone, email: $email, staff: $staff) \n lead \n id\n __typename\n \n __typename\n \n\n"

很高兴您发现了问题，您应该考虑编写自己的答案并将其设置为已接受，以便其他面临类似问题的人知道去哪里寻找！

完成。谢谢@Jaxx

【参考方案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,
      ,
    );

【讨论】：

谢谢埃文。请记住“接受”您自己的答案作为您问题的解决方案（只有您作为问题的创建者才能这样做）。