无法加载资源：400（错误请求）React / GraphQL / Sequelize

Question

我正在努力在graphql / mysql / react应用程序上实施评分系统。当我尝试向数据库的“评级”表中添加新条目时，我不断收到以下错误。我已经一遍又一遍地检查了我的语法，但我不知道出了什么问题。

以下是错误消息：加载资源失败：服务器响应状态为400（错误请求）

这是迁移文件： code / api / src / migrations / 5-ratings.js

module.exports = {
    up: (queryInterface, Sequelize) => {
        return queryInterface.createTable('ratings', {
            id: {
                allowNull: false,
                autoIncrement: true,
                primaryKey: true,
                type: Sequelize.INTEGER
            },
            rating: {
                type: Sequelize.INTEGER
            },
            crate: {
                type: Sequelize.INTEGER
            },
            createdAt: {
                allowNull: false,
                type: Sequelize.DATE
            },
            updatedAt: {
                allowNull: false,
                type: Sequelize.DATE
            }
        });
    },
    down: (queryInterface, Sequelize) => {
        return queryInterface.dropTable('ratings');
    }
}

这里是评分模型： code / api / src / modules / rating / model.js

'use strict'

// Rating
module.exports = function(sequelize, DataTypes) {
    return sequelize.define('ratings', {
        rating: {
            type: DataTypes.INTEGER
        },
        crate: {
            type: DataTypes.INTEGER
        }
    })
}

这是创建等级突变： api / src / modules / rating / mutations.js

// Imports
import { GraphQLInt } from 'graphql'

// App Imports
import { RatingType } from './types'
import { create, remove } from './resolvers'

export const ratingCreate = {
    type: RatingType,
    args: {
        rating: {
            name: 'rating',
            type: GraphQLInt
        },

        crate: {
            name: 'crate',
            type: GraphQLInt
        }
    },
    resolve: create
}

这是创建评分解析器： code / api / src / modules / rating / resolvers.js

// App Imports
import params from '../../config/params'
import models from '../../setup/models'

// Create rating
export async function create(parentValue, { rating, crate }, { auth }) {
  if(auth.user && auth.user.id > 0) {
    return await models.Rating.create({
      rating,
      crate
    })
  } else {
    throw new Error('Operation denied.')
  }
}

以下是评分创建动作创建者： code / web / src / modules / rating / api / actions.js

// Create rating
export function create(rating) {
    return dispatch => {
        return axios.post(routeApi, mutation({
            operation: 'ratingCreate',
            variables: rating,
            fields: ['id', 'rating', 'crate']
        }))
    }
}

这是UI组件： code / web / src / modules / rating / CreateRating.js

// Imports
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'

// UI Imports
import Button from '../../ui/button'
import Icon from '../../ui/icon'
import { white } from '../../ui/common/colors'
import Input from '../../ui/input/Input'
import H3 from '../../ui/typography/H3'

// App Imports
import { create } from './api/actions'
import { messageShow, messageHide } from '../common/api/actions'

class CreateRating extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isLoading: false,
            rating: {
                rating: 0,
                crate: this.props.match.params.id
            }
        }
    }

    // getAverageRating = (id) => {

    // }

    onChange = (event) => {
        let rating = this.state.rating
        rating[event.target.name] = parseInt(event.target.value)

        this.setState({
            rating
        })
    }

    onSubmit = (event) => {
        event.preventDefault()

        this.setState({
            isLoading: true
        })

        this.props.messageShow('Saving rating, please wait...')

        // Save rating
        this.props.create(this.state.rating)
            .then(response => {
                this.setState({
                    isLoading: false
                })

                if (response.data.errors && response.data.errors.length > 0) {
                    this.props.messageShow(response.data.errors[0].message)
                } else {
                    this.props.messageShow('Rating saved successfully.')
                }
            })
            .catch(error => {
                this.props.messageShow('An error occurred. Please try again.')

                this.setState({
                    isLoading: false
                })
            })
            .then(() => {
                window.setTimeout(() => {
                    this.props.messageHide()
                }, 5000)
            })
    }


    render() {
        console.log(this.state.rating.rating)
        return (
                <div style={{ textAlign: 'center', padding: '2em' }}>

                    <H3 font="secondary" style={{ marginBottom: '1em' }}>Rate your crate below!</H3>
                    {/* Rating Form */}
                      <form onSubmit={this.onSubmit}>
                        <div style={{ width: '25em', margin: '0 auto' }}>
                          {/* Rating */}
                          <Input
                            type="range"
                            fullWidth={true}
                            placeholder="0"
                            required="required"
                            name="rating"
                            value={this.state.rating.rating}
                            onChange={this.onChange}
                            style={{ marginTop: '1em' }}
                            min="0"
                            max="5"
                            list="tickmarks"
                          />
                        </div>

                        <div style={{ marginTop: '2em' }}>
                        {/* Form submit */}
                          <Button type="submit" theme="secondary" disabled={this.state.isLoading}>
                            Submit Rating
                            <Icon size={1.2} style={{ color: white }}>navigate_next</Icon></Button>
                        </div>
                      </form>
                </div>
            )
    }
}

// Component Properties
CreateRating.propTypes = {
    messageShow: PropTypes.func.isRequired,
    messageHide: PropTypes.func.isRequired,
    create: PropTypes.func.isRequired
}

export default withRouter(connect(null, { messageShow, messageHide, create})(CreateRating))

这是文件层次结构：

code
  ├── package.json
  │
  ├── api (api.example.com)
  │   ├── public
  │   ├── src
  │   │   ├── config
  │   │   ├── migrations
  │   │   ├── modules
  │   │   ├── seeders
  │   │   ├── setup
  │   │   └── index.js
  │   │
  │   └── package.json
  │
  ├── mobile (Android, iOS)
  │   ├── assets
  │   ├── src
  │   │   ├── modules
  │   │   ├── setup
  │   │   ├── ui
  │   │   └── index.js
  │   │
  │   └── package.json
  │
  ├── web (example.com)
  │   ├── public
  │   ├── src
  │   │   ├── modules
  │   │   ├── setup
  │   │   ├── ui
  │   │   └── index.js
  │   ├── storybook
  │   │
  │   └── package.json
  │
  ├── .gitignore
  └── README.md

任何帮助将不胜感激，谢谢！