我在React中相当新，特别是在GraphQL中，所以现在，它是我第一次使用React-Apollo而我正在使用Apollo Boost。
当我在渲染函数中使用React-apollo的Mutation时，我遇到了错误（或缺少错误）。以下是我的代码片段（原谅我在这段代码中所做的不良做法，一旦我修正了突变，我会修复它们）：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ApolloProvider } from "react-apollo";
import { ApolloClient, HttpLink, InMemoryCache } from "apollo-boost";
import registerServiceWorker from './registerServiceWorker';
const client = new ApolloClient({
link: new HttpLink({
uri: 'http://localhost:3000/graphql',
}),
onError: ({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
console.log(graphQLErrors);
}
},
cache: new InMemoryCache()
});
const AppWithProvider = () => (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
);
ReactDOM.render(<AppWithProvider />, document.getElementById('root'));
registerServiceWorker();
const BOOK_CART = gql `mutation booking($rDateStart: Date!, $rDateEnd: Date!, $grade: Int!, $section: String!, $userId: ID!, $cartlabId: ID!){
bookCart(rDateStart: $rDateStart, rDateEnd: $rDateEnd, grade: $grade, section: $section, userId: $userId, cartlabId: $cartlabId){
id
rDateStart
rDateEnd
}
}
`;
class ReserveCartsForm extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: 1,
classroom: '',
subject: '',
cart: '',
timezone: '',
reservationTime: '',
endTime: '',
open: false,
date: '',
fromDt: '',
toDt: '',
created: new Date().toISOString(),
status: 'reserved'
};
this.handleChange = this.handleChange.bind(this);
this.handleOnChange = this.handleOnChange.bind(this);
}
handleOnChange = (key, e) => {
this.setState({ [key]: e.target.value });
};
render() {
const { classes } = this.props;
const { userId, fromDt, toDt, classroom, cart, timezone, reservationTime, laboratory } = this.state;
const fromDateTime = this.state.fromDt = Moment(this.state.date + " " + this.state.reservationTime).toISOString();
const toDateTime = () => {
this.state.endTime = Moment.utc(+Moment.utc(this.state.reservationTime, 'hh:mm A').add(40, 'm')).format('HH:mm');
return this.state.toDt = Moment(this.state.date + " " + this.state.endTime).toISOString();
}
return <div className={classes.root}>
<br />
<br />
<Typography variant="title" className={classes.heading} component="h3" color="primary">
Make New Reservation
</Typography>
<br />
<Grid container spacing={24}>
<Grid item xs={8} sm={7} md={6} lg={4} xl={3} className={classes.grid}>
<Card className={classes.card}>
<CardContent>
<div className={classes.header}>
<Typography variant="headline" component="h1" color="inherit" className={classes.title}>
Carts Reservation Form
</Typography>
</div>
<div className={classes.container}>
<Mutation mutation={BOOK_CART}>
{bookCart => <div>
<FormGroup row={true} className={classes.formGroup}>
<form onSubmit={e => {
e.preventDefault(); console.log(this.state); bookCart({ variables: { rDateStart: fromDt, rDateEnd: toDt, grade: classroom.substring(1), section: classroom.substring(1, 1), userId: userId, cartlabId: cart } }); }}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="carts">
Choose Cart
</InputLabel>
<Select value={cart} labelstyle={classes.select} onChange={this.handleChange} inputProps={{ name: "cart", id: "carts" }}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={1}>iPad Carts</MenuItem>
<MenuItem value={2}>MacBook Carts</MenuItem>
<MenuItem value={3}>MacBook Air Carts</MenuItem>
</Select>
</FormControl>
<form className={classes.formControl} noValidate>
<TextField id="date" label="Date" type="date" className={classes.textField} InputLabelProps={{ shrink: true }} onChange={e => this.handleOnChange("date", e)} />
</form>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="timezone">
Choose Timezone
</InputLabel>
<Select value={timezone} labelstyle={classes.select} onChange={this.handleChange} inputProps={{ name: "timezone", id: "timezone" }}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={"P"}>
Pre School (40 mins.)
</MenuItem>
<MenuItem value={"G"}>
Grade School (50 mins.)
</MenuItem>
<MenuItem value={"H"}>
High School (60 mins.)
</MenuItem>
</Select>
</FormControl>
<FormControl className={classes.formControl}>
<hr />
<FormControl className={classes.container}>
<InputLabel htmlFor="endTime">
Time of Borrowing
</InputLabel>
<Select value={reservationTime} labelstyle={classes.select} onChange={this.handleChange} inputProps={{ name: "reservationTime", id: "endTime" }}>
<MenuItem value={`7:40`}>Period 1</MenuItem>
<MenuItem value={`8:20`}>Period 2</MenuItem>
<MenuItem value={`9:00`}>Period 3</MenuItem>
<MenuItem value={`9:40`}>Period 4</MenuItem>
<MenuItem value={`10:20`}>Period 5</MenuItem>
<MenuItem value={`11:00`}>Period 6</MenuItem>
<MenuItem value={`11:40`}>Period 7</MenuItem>
</Select>
<FormHelperText id="name-helper-text">
The time the reservation ends.
</FormHelperText>
</FormControl>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple">
Subject
</InputLabel>
<Input id="age-simple" placeholder="Subject" onChange={e => this.handleOnChange("subject", e)} />
<FormHelperText id="name-helper-text">
The subject the carts will be used in
</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<TextField id="classroom" label="Classroom" className={classes.textField} value={laboratory} onChange={e => this.handleOnChange("classroom", e)} />
<FormHelperText id="name-helper-text">
Where the carts will be used
</FormHelperText>
</FormControl>
<FormControl className={classes.container} disabled>
<Input id="fromDt" className={classes.textField} value={fromDateTime} onChange={e => this.handleOnChange("fromDt", e)} />
</FormControl>
<br />
<FormControl className={classes.container} disabled>
<Input id="toDt" className={classes.textField} value={toDateTime()} onChange={e => this.handleOnChange("toDt", e)} />
</FormControl>
<Button variant="raised" color="primary" type="submit">
Reserve
</Button>
</form>
</FormGroup>
</div>}
</Mutation>
</div>
</CardContent>
<CardActions>
<Dialog open={this.state.open} onClose={this.handleClose} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
<DialogTitle id="alert-dialog-title">
{"Cart reserved"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
You have reserved a cart. Click to confirm.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClickClose} color="primary">
Back
</Button>
<Button onClick={(this.props.onSubmit, this.handleClickClose)} color="primary" autoFocus>
Confirm
</Button>
</DialogActions>
</Dialog>
</CardActions>
<br />
</Card>
</Grid>
</Grid>
</div>;
}
}
ReserveCartsForm.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(ReserveCartsForm);
我尝试寻找React Apollo 2.1 Mutations documentation here和this question, too from here.等示例。因此，这些是我的代码来自突变的几个例子。
任何建议都会非常有用和赞赏。