Graphiql playground not displayed in the browser

[slim-hmidi]

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]

the issue was the order of express middleware, when I put the graphqlHTTP middleware before helmet, it works now.