Graphiql | Install

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' ));

// Root resolver const root = hello: () => 'Hello 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 install

const root = hello: () => 'Hello from GraphiQL!', version: () => '1.0.0' ;

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 CMD ["graphiql", "--endpoint", "http://host

const resolvers = Query: hello: () => 'Hello from Apollo!'

async function startServer() const app = express(); const server = new ApolloServer( typeDefs, resolvers ); Installation Steps: | OS | Command / Action

app.listen(4000, () => console.log('Apollo Server with GraphiQL at http://localhost:4000/graphql'); );