当前位置: 首页 > 知识库问答 >
问题:

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

施令秋
2023-03-14
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个答案

濮君植
2023-03-14

嗨,问题在这一行。

addBrand({ variables: { type: input.value } });

这里传递变量类型,因为变异需要描述。因此,改为下面应该可以解决您的问题。

addBrand({ variables: { description: input.value } });

祝你好运,让我知道你进展如何。

 类似资料:
  • 如何为GraphQL编写单元测试?我正在使用apollo服务器、graphql-tester和graphql。

  • 我按照Apollo的文档在客户端和服务器上设置GraphQL订阅,虽然我已经完成了90%,但我不知道如何设置订阅通道以及如何将突变连接到这些通道,以便每当突变发生时,服务器都会将新数据推送到客户端。(对于内容,我正在制作一个Reddit克隆,人们可以在其中发布主题,其他人可以对其发表评论。所以当你看到“Topics”或“TopicList”时,把它们想象成帖子。) 到目前为止,我已经成功地为订阅设

  • A React + Apollo + GraphQL GitHub Client Features React 16 with create-react-app Responsive React Router 4 Apollo with GitHub GraphQL API Queries and Mutations with render props Optimistic Updates Pag

  • 问题内容: 在这里和其他地方,我已经看到许多对此的部分答案,但是我非常适合作为新手程序员,并希望找到一个彻底的解决方案。我已经能够在Chrome Canary(v。29.x)中设置笔记本电脑麦克风的录制音频,并且可以使用recorder.js相对容易地设置录制.wav文件并将其保存在本地,例如: http://webaudiodemos.appspot.com/AudioRecorder/inde

  • High performance Next + React + GraphQL starter kit The purpose of this starter kit is not to be complete solution, but introduction for creating high performance websites with Next.js, React and Grap