Graphiql Install !!top!! -
startServer();
// 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
const app = express();
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 startServer(); // GraphiQL middleware (manual route) app
echo "Starting server..." node server.js // GraphiQL middleware (manual route) app.get('/graphiql'