我正在尝试从表单将数据发布到SQLite DB。在React非常新，所以请耐心等待。
现在，在我的Register.js表单代码中，我有一个action="/graphql"。我想知道如何将POST路由到我的graphql变异代码并最终到达SQLite插入（我相信我仍然缺少）。
请查看并告诉我有关如何继续的任何建议。
此处还有我最新的工作分支：Github
处理server.js的{{1}}的一部分：
graphql app.use( '/graphql', expressGraphQL(req => ({
schema,
graphiql: false,
rootValue: { request: req },
pretty: __DEV__,
}))
);
表格：
Register.JS import React from 'react';
import PropTypes, { func } from 'prop-types';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Register.css';
import fetch from 'node-fetch';
let postURL = 'http://localhost:3000/graphql';
class Register extends React.Component {
static propTypes = {
title: PropTypes.string.isRequired,
};
constructor(props) {
super(props);
this.state = {
schoolName: '',
userName: '',
password: '',
};
this.onSchoolNameChange = this.onSchoolNameChange.bind(this);
this.onUserNameChange = this.onUserNameChange.bind(this);
this.onPasswordChange = this.onPasswordChange.bind(this);
}
onSchoolNameChange(event) {
this.setState({ schoolName: event.target.value });
}
onUserNameChange(event) {
this.setState({ userName: event.target.value });
}
onPasswordChange(event) {
this.setState({ password: event.target.value });
}
handleSubmit = () => {
// eslint-disable-next-line no-unused-vars
const { schoolName, userName, password } = this.state;
console.log(postURL);
fetch(postURL, {
mode: 'no-cors',
method: "POST",
headers: {
"Content-Type": "multipart/form-data",
"Accept": "application/json",
"type": "formData"
},
body: this.state
}).then((response) => {
console.log(response);
alert("Submitted!");
}).catch((error) => {
console.log(error);
})
};
render() {
const { schoolName, userName, password } = this.state;
const isEnabled =
schoolName.length > 0 && userName.length > 0 && password.length > 0;
return (
<div className={s.root}>
<div className={s.container}>
<h1>{this.props.title}</h1>
<form action="/graphql" method="post" onSubmit={this.handleSubmit}>
<div className={s.formGroup}>
<label className={s.label} htmlFor="schoolName">
School Name:
<input
className={s.input}
id="schoolName"
type="text"
name="schoolName"
value={this.state.schoolName}
onChange={this.onSchoolNameChange}
autoFocus // eslint-disable-line jsx-a11y/no-autofocus
/>
</label>
</div>
<div className={s.formGroup}>
<label className={s.label} htmlFor="userName">
User Name:
<input
className={s.input}
id="userName"
type="text"
name="userName"
value={this.state.userName}
onChange={this.onUserNameChange}
/>
</label>
</div>
<div className={s.formGroup}>
<label className={s.label} htmlFor="password">
Password:
<input
className={s.input}
id="password"
type="password"
name="password"
value={this.state.password}
onChange={this.onPasswordChange}
/>
</label>
</div>
<div className={s.formGroup}>
<button disabled={!isEnabled} className={s.button} type="submit">
Submit
</button>
</div>
</form>
</div>
</div>
);
}
}
export default withStyles(s)(Register);
：
Schema.js import {
GraphQLSchema as Schema,
GraphQLObjectType as ObjectType,
} from 'graphql';
import mutation from './mutations/mutation'
const schema = new Schema({
mutation: mutation
});
export default schema;
：
sequelize.js import Sequelize from 'sequelize';
import config from '../config';
const sequelize = new Sequelize(config.databaseUrl, {
dialect: 'sqlite',
storage: './database.sqlite',
define: {
freezeTableName: true,
},
});
export default sequelize;
：
Mutation.js import {GraphQLObjectType, GraphQLString} from 'graphql';
import SchoolType from '../types/SchoolType';
const Mutation = new GraphQLObjectType({
name: 'SchoolMutation',
fields: {
registerSchool: {
type: SchoolType,
description: 'Register a new school',
args: {
id: {
name: 'id',
type: GraphQLString
},
userName: {
name: 'userName',
type: GraphQLString
},
password: {
name: 'password',
type: GraphQLString
}
},
resolve: (root, {id, userName, password}) => {
//do something??? call db?
}
}
}
});
export default Mutation;
：
SchoolType.js