...Home for Nigerian Researchers
Run with: bash install-graphiql.sh GraphiQL installation is straightforward with any of the methods above. For most Node.js developers, the Express middleware approach (Method 1) or Apollo Server (Method 2) provides the best balance of simplicity and features. The standalone desktop version is ideal for testing remote endpoints without local server setup.
// 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> ); ); graphiql install
async function startServer() const app = express(); const server = new ApolloServer( typeDefs, resolvers ); Run with: bash install-graphiql
Start with Apollo Server for new projects as it includes GraphiQL by default and provides a superior developer experience. Appendix: Quick Reference Commands # Minimal npm install npm install graphql express graphql-http With Apollo (automatic GraphiQL) npm install @apollo/server graphql Temporary standalone (npx) npx graphiql --endpoint https://countries.trevorblades.com/graphql Global standalone (npm) npm install -g graphiql graphiql Docker docker run -p 3000:3000 -e GRAPHQL_ENDPOINT=http://localhost:4000/graphql graphiql/standalone // GraphiQL middleware (manual route) app
To install GraphQL Playground as an alternative:
// Root resolver const root = hello: () => 'Hello GraphiQL!' ;