GraphQL: Schema is not available

Question

I'm newbie in GraphQL and I need your expert knowledge!!! My problem is that Schema is not avaible in graphiql.

My tree of directories of my project is:

And the code of my files are:

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;

I'm totally lost whit this error. I don't know how it happens because I think I'm calling right to eache module. So, what am I doing wrong?

When I call to http://localhost:3000/graphiql I've got this:

What am I doing wrong?

Edit I:

I have checked that in chrome console when I load the page I've got this:

And morgan module says to me in the console ...

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

Why /graphiql is found it when I request the page but is not found it with POST? I don't understand anything :(

Answer 1

I know this issue is very old, but looking at it, I would suggest you replace this:

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;

To this:

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

It looks good. But may be diving into the basic can help figure out the issue. https://medium.com/codingthesmartway-com-blog/creating-a-graphql-server-with-node-js-and-express-f6dddc5320e1

Answer 3

I have found the solution!!! I have added router.post function to my graphql.routes.js file and it works!!!

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;