Question

我是GraphQL的新手，我需要你的专业知识！我的问题是在graphiql中无法使用Schema。

我项目的目录树是：

我的文件代码是：

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;

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

当我致电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

我找到了解决方案！我已经将router.post函数添加到我的graphql.routes.js文件中，它可以工作!!!

<强> 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;

GraphQL：架构不可用

3 个答案: