Graphiql | Install
;
// GraphQL endpoint app.all('/graphql', createHandler( schema, rootValue: root ));
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> ); ); graphiql install
npm install graphql-playground-middleware-express Save as install-graphiql.sh :
app.use('/graphql', express.json(), expressMiddleware(server)); ; // GraphQL endpoint app
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 ;
const root = hello: () => 'Hello from GraphiQL!', version: () => '1.0.0' ; Installation Steps: | OS | Command / Action
Apollo Server v4 automatically serves GraphiQL when you visit the endpoint URL in a browser (no separate route needed). 3.3 Method 3: Standalone Desktop Application Target: Developers who want GraphiQL without a server. Installation Steps: | OS | Command / Action | |----|------------------| | macOS | brew install --cask graphiql | | Windows | Download .exe from GraphiQL Releases | | Linux (AppImage) | Download .AppImage , chmod +x , and run | Alternative: Run via npx (temporary) npx graphiql This opens a temporary GraphiQL instance at http://localhost:3000 that can connect to any GraphQL endpoint. 3.4 Method 4: Docker Deployment Target: Team environments or CI/CD pipelines. Dockerfile: FROM node:18-alpine WORKDIR /app
