尝试使用在 react、graphql 和 apollo 中创建的服务器保存记录时出错

Posted 2023-03-08

【中文标题】尝试使用在 react、graphql 和 apollo 中创建的服务器保存记录时出错

【英文标题】：Error trying to save a record with server created in react, graphql and apollo

【发布时间】：2019-06-24 11:57:37

【问题描述】：

当我尝试从我的 UI 向 mi SERVER 发送寄存器时，会向我发送此消息

POST http://localhost:4000/graphql 400（错误请求） index.js:70 [GraphQL 错误]：消息：所需类型的变量“$description” “细绳！”未提供。，位置：[对象对象]，路径： 未定义的 index.js：75 [网络错误]：ServerError：响应不 成功：收到状态码

这是我的类组件

import React,  Component, Fragment  from 'react';
import  Query, Mutation  from 'react-apollo';
import BrandItem from '../models/BrandItem';
import * as BrandService from '../services/BrandService';

export class Brand extends Component 
  render() 
    let input;

    return (
      <div className="divform">
        <Mutation mutation=BrandService.ADD_BRAND>
          
            (addBrand,  data ) => (
              <form onSubmit=e => 
                e.preventDefault();
                addBrand( variables:  type: input.value  );
                input.value = '';
              >
                <label htmlFor="description">Description</label>
                <input type="text" id="description" name="description" required ref=node =>  input = node;  />
                <input type="submit" value="Send" />
              </form>
            )
          

        </Mutation>
        <div>
          <Fragment>

            <Query query=BrandService.BRAND_QUERY>
              
                ( loading, error, data ) => 
                  if (loading) return <div><h4>loading....</h4></div>
                  if (error) console.log(error);

                  return <Fragment>
                    <table>
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        
                          data.brands.map(brand => (
                            <BrandItem key=brand.id brand=brand />
                          ))
                        
                      </tbody>
                    </table>
                  </Fragment>
                
              
            </Query>
          </Fragment>
        </div>
      </div>
    )
  


export default Brand

这是我的服务

import gql from 'graphql-tag';

export const BRAND_QUERY = gql`
  query BrandQuery 
    brands 
      id
      description
    
  
`;

export const ADD_BRAND = gql`
  mutation AddBrand($description: String!)
    addBrand(description: $description)
      id
    
  
`;

【参考方案1】：

您好，问题出在这一行。

addBrand( variables:  type: input.value  );

在这里，您将传递变量类型，因为突变需要描述。因此，更改为以下内容应该可以解决您的问题。

addBrand( variables:  description: input.value  );

祝你好运，让我知道你过得怎么样。

【讨论】：

你好肖恩，非常感谢你的帮助，真的是这样。我从这些主题开始，你能告诉我什么结构或如何设计我的应用程序吗？谢谢。

我很高兴能帮上忙。你看起来已经做得很好了。就我个人而言，我会将视图与数据获取分开。因此，您的表单将是一个单独的组件，您可以传递 addBrand 属性。