Graphiql playground not displayed in the browser
slim-hmidi opened this issue · 1 comments
slim-hmidi commented
I create a server with express-graphql and I set graphiql to true in order to get the playground displayed whenever I run the server but I got only the word Loading...
displayed.
App.ts:
import { json } from 'body-parser'
import cors from 'cors'
import dotenv from 'dotenv'
import { graphqlHTTP } from 'express-graphql'
import { Express } from 'express'
import helmet from 'helmet'
import { makeExecutableSchema } from '@graphql-tools/schema'
import { errorHandlerMiddleware, notFound } from '../middlewares/errorHandlers'
import { resolvers, typeDefs } from '../../graphql/index'
dotenv.config()
const schema = makeExecutableSchema({
typeDefs,
resolvers
})
const expressLoader = async (app: Express) => {
app.use(cors())
app.use(helmet())
app.use(json())
app.use('/graphql', graphqlHTTP({ schema, graphiql: true }))
app.use(notFound)
app.use(errorHandlerMiddleware)
}
export default expressLoader
graphql/index.ts:
const path = require('path')
const { loadFilesSync } = require('@graphql-tools/load-files')
const { mergeTypeDefs, mergeResolvers } = require('@graphql-tools/merge')
const typesArray = loadFilesSync(path.join(__dirname), {
ignoreIndex: true,
extensions: ['graphql']
})
const typeDefs = mergeTypeDefs(typesArray)
const resolversArray = loadFilesSync(path.join(__dirname, './**/*.resolvers.*'))
const resolvers = mergeResolvers(resolversArray)
export {
typeDefs,
resolvers
}
When I test the app with postman and I tried to create a mutation, it works correctly but I'm not able to get the playground in the browser to use it.
express-graphql: 0.12.0
graphql: 15.5.3
graphql-tools: 8.2.0
OS: Mac Os Big Sur v 11.5.2
slim-hmidi commented
the issue was the order of express middleware, when I put the graphqlHTTP middleware before helmet, it works now.