startServer();
app.get('/graphiql', (req, res) => res.send( <!DOCTYPE html> <html> <head> <title>GraphiQL Demo</title> <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" /> </head> <body style="margin: 0; height: 100vh;"> <div id="graphiql" style="height: 100vh;"></div> <script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script> <script> const fetcher = GraphiQL.createFetcher( url: '/graphql' ); ReactDOM.render( React.createElement(GraphiQL, fetcher: fetcher ), document.getElementById('graphiql') ); </script> </body> </html> ); );
await server.start();
app.all('/graphql', createHandler( schema, rootValue: root ));
CMD ["graphiql", "--endpoint", "http://host.docker.internal:4000/graphql"] docker build -t graphiql-standalone . docker run -p 3000:3000 graphiql-standalone 4. Configuration Options 4.1 GraphiQL Middleware Options (graphql-express) | Option | Type | Default | Description | |--------|------|---------|-------------| | endpointURL | string | /graphql | GraphQL endpoint URL | | subscriptionsEndpoint | string | null | WebSocket URL for subscriptions | | query | string | "" | Pre-filled query | | variables | object | {} | Pre-filled variables JSON | | headers | object | {} | HTTP headers for requests | | editorTheme | string | "graphiql" | Theme (light/dark/custom) | 4.2 Advanced Configuration Example: app.use('/graphiql', graphiqlExpress( endpointURL: '/graphql', subscriptionsEndpoint: 'ws://localhost:4000/subscriptions', query: `# Welcome to GraphiQL query GetUser($id: ID!) user(id: $id) name email `, variables: JSON.stringify( id: "123" ), headers: JSON.stringify( Authorization: "Bearer token" ), editorTheme: "dark" )); 5. Security Considerations | Concern | Recommendation | |---------|----------------| | Production Exposure | Disable GraphiQL in production ( NODE_ENV=production ) | | CORS | Configure CORS properly when GraphiQL is on different origin | | Authentication | Use headers configuration for token-based auth | | CSRF | GraphiQL sends Content-Type: application/json , generally safe | Disable in Production: if (process.env.NODE_ENV !== 'production') app.use('/graphiql', graphiqlExpress( endpointURL: '/graphql' )); graphiql install
// GraphiQL middleware (manual route) app.get('/graphiql', (req, res) => res.send( <!DOCTYPE html> <html> <head> <title>GraphiQL</title> <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" /> </head> <body style="margin: 0; height: 100vh;"> <div id="graphiql" style="height: 100vh;"></div> <script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script> <script> const fetcher = GraphiQL.createFetcher( url: '/graphql' ); ReactDOM.render( React.createElement(GraphiQL, fetcher: fetcher ), document.getElementById('graphiql') ); </script> </body> </html> ); );
app.listen(4000, () => console.log('Server running at http://localhost:4000/graphiql'); ); node server.js Access: http://localhost:4000/graphiql 3.2 Method 2: Apollo Server Integration Target: Apollo Server users (most modern setup). Installation: npm install @apollo/server graphql npm install @as-integrations/express Server Code: const express = require('express'); const ApolloServer = require('@apollo/server'); const expressMiddleware = require('@apollo/server/express4'); const typeDefs = #graphql type Query hello: String ; startServer(); app
app.listen(4000, () => console.log('Apollo Server with GraphiQL at http://localhost:4000/graphql'); );