As someone new to GraphQL, I'm seeking your expert knowledge! I've encountered an issue where the Schema is not available in GraphiQL.
Here is the directory structure of my project:
https://i.sstatic.net/Bm9hi.png
Below are the contents of my files:
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
},...
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
...
I am struggling to understand this error. It seems like I have imported all modules correctly. What could be going wrong?
When I try to access http://localhost:3000/graphiql, I encounter this:
https://i.sstatic.net/aciKe.png
What am I missing here?
Edit I:
I observed in Chrome console that when the page loads, I receive the following messages:
https://i.sstatic.net/Eb7QU.png
The Morgan module in the console shows...
GET /graphiql 200 0.886 ms - 3868
POST /graphiql? 404 0.664 ms - 148
POST /graphiql? 404 2.034 ms - 148
Why does it show a 404 error for POST requests to /graphiql but works fine for GET requests? This has left me completely puzzled and confused.