GraphQL：架構不可用

Question

我是 GraphQL 的新手，我需要你的專業知識！！！ 我的問題是 Schema 在 graphiql 中不可用。

我的項目目錄樹是：

我的文件的代碼是：

索引.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;

播放器.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;

播放器.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;

架構.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;

Answer 2

這看起來不錯的樣子。 但可能深入了解基本可以幫助找出問題。 https://medium.com/codingthesmartway-com-blog/creating-a-graphql-server-with-node-js-and-express-f6dddc5320e1

Answer 3

我找到了解決方案！！！ 我已經在我的 graphql.routes.js 文件中添加了 router.post 函數並且它有效！！！

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;