javascript - GraphQL:架构不可用

Question

我是 GraphQL 的新手，我需要您的专业知识!我的问题是 schema 在 graphiql 中不可用。

我的项目目录树是:

我的文件的代码是:

index.js

import express from "express";
import morgan from "morgan";
import config from "./config";

const app = express();

//Settings

//Middleware
app.use(morgan("dev"));
app.use(express.json());

//Routes
app.use(require("./routes/graphql.routes"));

//Starting server
app.listen(process.env.PORT || config.server.port, () => {
    console.log(config.server.name + " is listening on port " + config.server.port);
})

graphql.routes.js

import express from "express";
import GraphHTTP from "express-graphql";
import {PlayerModel} from "../models/player.model"; 
import {Schema} from "../schemas/schema"; 

const router = express.Router();

router.get("/graphiql", GraphHTTP({
    schema: Schema,
    pretty: true,
    graphiql: true
}));

module.exports = router;

player.model.js

import {DB} from "../db";
import Sequelize from "sequelize";
const PlayerModel = DB.db.define("tbl003_player", {
        id: {
            type: Sequelize.INTEGER,
            primaryKey: true,
            autoIncrement: true,
            notNull: true
        },
        name: {
            type: Sequelize.STRING,
            notNull: true,
            notEmpty: true
        },
        name_url: {
            type: Sequelize.STRING,
            notNull: true,
            notEmpty: true
        },
        language: {
            type: Sequelize.STRING,
            notNull: true,
            notEmpty: true,
            isIn: {
                args: [["sp", "en"]],
                msg: "Must be 'sp' or 'en'",
            }
        },
        twitter: {
            type: Sequelize.STRING,
            notEmpty: false
        },
        height: {
            type: Sequelize.FLOAT,
            isDecimal: true,
            notEmpty: false
        },
        date_insert: {
            type: Sequelize.DATE,
            notNull: true,
        }
    },{
        getterMethods: {
            getID(){
                return this.id
            },
            getName(){
                return this.name
            },
            getNameURL(){
                return this.name_url
            },
            getLanguage(){
                return this.language
            },
            getTwitter(){
                return this.twitter
            },
            getHeight(){
                return this.height
            },
            getDateInsert(){
                return this.date_insert
            }
        },
        setterMethods: {
            setName(value){
                this.setDataValue("name", value);
            },
            setNameURL(value){
                this.setDataValue("name_url", value);
            },
            setLanguage(value){
                this.setDataValue("language", value);
            },
            setTwitter(value){
                this.setDataValue("twitter", value);
            },
            setHeight(value){
                this.setDataValue("height", value);
            },
            setDataInsert(){
                let date = new Date("now");
                this.setDataValue("date_insert", date);
            }
        }     
    }
);

module.exports.PlayerModel = PlayerModel;

player.schema.js

import {
    GraphQLObjectType,
    GraphQLNonNull,
    GraphQLID,
    GraphQLString,
    GraphQLFloat,
    GraphQLList
} from "graphql";
import {DateTime} from "../scalar/dateTime";


const Player = new GraphQLObjectType({
    name: "Player",
    description: "Player of basketball",
    fields: () => {
        return {
            id: {
                type: new GraphQLNonNull(GraphQLID),
                resolve(player){
                    return player.id
                }
            },
            name: {
                type: new GraphQLNonNull(GraphQLString),
                resolve(player){
                    return player.name
                } 
            },
            name_url: {
                type: new GraphQLNonNull(GraphQLString),
                resolve(player){
                    return player.name_url
                }
            },
            language: {
                type: new GraphQLNonNull(GraphQLString),
                resolve(player){
                    return player.language
                }
            },
            twitter: {
                type: GraphQLString,
                resolve(player){
                    return player.twitter
                }
            },
            height: {
                type: GraphQLFloat,
                resolve(player){
                    return player.height
                }
            },
            date_insert: {
                type: new GraphQLNonNull(DateTime),
                resolve(player){
                    return player.date_insert
                }
            }
        }
    }
});

module.exports.Player = Player;

schema.js

import {
    GraphQLObjectType,
    GraphQLNonNull,
    GraphQLID,
    GraphQLInt,
    GraphQLString,
    GraphQLFloat,
    GraphQLList,
    GraphQLSchema
} from "graphql";
import { DB } from "../db";
import {Player} from "./player.schema";

const Query = new GraphQLObjectType({
    name: "Query",
    description: "This is root query",
    fields: () => {
        return {
            players: {
                type: GraphQLList(Player),
                args: {
                    id: {
                        type: GraphQLID
                    }
                },
                resolve(root, args){
                    return DB.db.models.tbl003_player.findAll({where: args});
                }
            },
        }
    }
});

const Schema = new GraphQLSchema({
    query: Query
});

module.exports.Schema = Schema;

我完全迷失了这个错误。我不知道这是如何发生的，因为我认为我正在调用每个模块的权利。那么，我做错了什么？

当我调用http://localhost:3000/graphiql时我有这个:

我做错了什么？

编辑我:

我已经在 Chrome 控制台中检查过，当我加载页面时，我得到了这个:

摩根模块在控制台中对我说......

GET /graphiql 200 0.886 ms - 3868
POST /graphiql? 404 0.664 ms - 148
POST /graphiql? 404 2.034 ms - 148

为什么我请求页面时可以找到/graphiql，但使用POST却找不到它？我什么都不懂:(

Answer 1

我知道这个问题很老了，但是看看它，我建议你替换它:

graphql.routes.js

import express from "express";
import GraphHTTP from "express-graphql";
import {PlayerModel} from "../models/player.model"; 
import {Schema} from "../schemas/schema"; 

const router = express.Router();

router.get("/graphiql", GraphHTTP({
    schema: Schema,
    pretty: true,
    graphiql: true
}));

router.post("/graphiql", GraphHTTP({
    schema: Schema,
    pretty: true,
    graphiql: true
}));

module.exports = router;

对此:

import express from "express";
import GraphHTTP from "express-graphql";
import {PlayerModel} from "../models/player.model"; 
import {Schema} from "../schemas/schema"; 

const router = express.Router();

router.use("/graphiql", GraphHTTP({
    schema: Schema,
    pretty: true,
    graphiql: true
}));

module.exports = router;