尝试使用在 react、graphql 和 apollo 中创建的服务器保存记录时出错
Error trying to save a record with server created in react, graphql and apollo
当我尝试从我的 UI 向 mi 服务器发送一个寄存器时,它向我发送了这条消息
POST http://localhost:4000/graphql 400 (Bad Request) index.js:70
[GraphQL error]: Message: Variable "$description" of required type
"String!" was not provided., Location: [object Object], Path:
undefined index.js:75 [Network error]: ServerError: Response not
successful: Received status code
这是我的 class 组件
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
}
}
`;
您好,问题出在这一行。
addBrand({ variables: { type: input.value } });
在这里您传递变量类型,因为突变需要描述。因此更改为以下应该可以解决您的问题。
addBrand({ variables: { description: input.value } });
祝你好运,告诉我你过得怎么样。
当我尝试从我的 UI 向 mi 服务器发送一个寄存器时,它向我发送了这条消息
POST http://localhost:4000/graphql 400 (Bad Request) index.js:70 [GraphQL error]: Message: Variable "$description" of required type "String!" was not provided., Location: [object Object], Path: undefined index.js:75 [Network error]: ServerError: Response not successful: Received status code
这是我的 class 组件
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
}
}
`;
您好,问题出在这一行。
addBrand({ variables: { type: input.value } });
在这里您传递变量类型,因为突变需要描述。因此更改为以下应该可以解决您的问题。
addBrand({ variables: { description: input.value } });
祝你好运,告诉我你过得怎么样。