{"id":10509,"library":"apollo-server-module-graphiql","title":"GraphiQL Renderer for Legacy Apollo Server","description":"apollo-server-module-graphiql is a legacy package designed to provide the GraphiQL interactive GraphQL IDE for older, now end-of-life versions of Apollo GraphQL Server, specifically Apollo Server v1 and potentially early v2. Its last significant update was in July 2018, bringing it to version 1.4.0. This package is no longer actively maintained or supported by Apollo GraphQL. In the modern Apollo Server ecosystem (versions 4 and 5, with 5.x being the current stable release, as of early 2026), interactive GraphQL IDE functionality is typically provided by Apollo Sandbox, which is integrated directly into the `@apollo/server` package or its framework-specific integrations (e.g., `expressMiddleware`). Key differentiators from current solutions include its reliance on older Apollo Server architectures and its independent module structure, contrasting with the bundled approach of Apollo Sandbox. Developers should strongly avoid using `apollo-server-module-graphiql` for any new projects or when migrating existing applications to current Apollo Server versions due to its abandoned status, lack of security updates, and fundamental incompatibility with newer APIs.","status":"abandoned","version":"1.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/apollographql/apollo-server/tree/master/packages/apollo-server-module-graphiql","tags":["javascript","GraphQL","GraphiQL","Apollo","Javascript","typescript"],"install":[{"cmd":"npm install apollo-server-module-graphiql","lang":"bash","label":"npm"},{"cmd":"yarn add apollo-server-module-graphiql","lang":"bash","label":"yarn"},{"cmd":"pnpm add apollo-server-module-graphiql","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While this package shipped TypeScript types, its primary usage context (older Node.js and CommonJS) often involved `require()`. Named exports were common.","wrong":"const renderGraphiQL = require('apollo-server-module-graphiql').renderGraphiQL;","symbol":"renderGraphiQL","correct":"import { renderGraphiQL } from 'apollo-server-module-graphiql';"},{"note":"Type imports were available for configuring the GraphiQL renderer options.","symbol":"GraphiQLOptions","correct":"import type { GraphiQLOptions } from 'apollo-server-module-graphiql';"}],"quickstart":{"code":"import { ApolloServer, gql } from 'apollo-server';\nimport { renderGraphiQL } from 'apollo-server-module-graphiql';\n\n// NOTE: This code demonstrates usage of an ABANDONED package\n// 'apollo-server-module-graphiql' with an older 'apollo-server' v2/v3.\n// Do NOT use this for new projects. Refer to @apollo/server for current practices.\n\nconst typeDefs = gql`\n  type Query {\n    hello: String\n    greet(name: String!): String\n  }\n`;\n\nconst resolvers = {\n  Query: {\n    hello: () => 'Hello world!',\n    greet: (_parent, { name }) => `Greetings, ${name}!`, \n  },\n};\n\nasync function startLegacyServer() {\n  const server = new ApolloServer({\n    typeDefs,\n    resolvers,\n  });\n\n  const { url } = await server.listen({ port: 4000 });\n  console.log(`🚀 GraphQL server ready at ${url}`);\n  console.log(`ℹ️ GraphiQL IDE (legacy) available at http://localhost:4000/graphiql`);\n\n  // This would be a basic Express-like route handler to render GraphiQL\n  // In a real application, this would be part of an actual HTTP framework integration.\n  // This example does not launch a separate Express server, just illustrates the renderGraphiQL usage.\n  // A proper integration would involve `app.get('/graphiql', (req, res) => res.send(renderGraphiQL()))`\n}\n\n// This quickstart does not fully spin up an Express server to serve GraphiQL,\n// as the primary ApolloServer.listen() provides its own landing page.\n// The `renderGraphiQL` function would typically be used in a custom HTTP server setup.\n// Example of how renderGraphiQL would be called:\nconst graphiqlHTML = renderGraphiQL({\n  endpointURL: '/graphql',\n  subscriptionsEndpoint: 'ws://localhost:4000/graphql'\n});\n// console.log('GraphiQL HTML example (output is truncated):', graphiqlHTML.substring(0, 500), '...');\n\n// To run this: ensure 'apollo-server@2.x.x' (e.g., 2.25.2) is installed,\n// NOT '@apollo/server'.\n// Then, `node your-file.js`\n\nstartLegacyServer();","lang":"typescript","description":"Demonstrates the historical usage of `renderGraphiQL` from this abandoned package with an older Apollo Server version. This setup is NOT recommended for current development."},"warnings":[{"fix":"Upgrade to `@apollo/server` and utilize the built-in Apollo Sandbox or `@apollo/server-plugin-landing-page` for an interactive GraphQL IDE. Do not use `apollo-server-module-graphiql`.","message":"This package, `apollo-server-module-graphiql` (v1.x), is formally abandoned and has been end-of-life since 2018, coinciding with the end-of-life of Apollo Server v1. It is incompatible with Apollo Server v3, v4, and v5. Attempting to use it with modern Apollo Server versions will result in runtime errors due to API mismatches.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Migrate your GraphQL server to the latest `@apollo/server` package (v5.x or newer). Refer to the Apollo Server migration guides for previous versions.","message":"The `apollo-server` package (versions 2.x and 3.x), which this module might have been used with, is also end-of-life (v3 since October 2024, v2 since October 2023). This package will not receive security patches or bug fixes, making any application using it vulnerable.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"When using `@apollo/server`, the GraphQL playground is usually available at the GraphQL endpoint itself. For custom landing pages or integrations, use the `ApolloServerPluginLandingPageProductionDefault` or `ApolloServerPluginLandingPageLocalDefault` plugins.","message":"The function `renderGraphiQL` generates an HTML string. In contemporary Apollo Server setups, the GraphQL IDE (Apollo Sandbox) is typically served automatically by `@apollo/server` via its integrations (e.g., `expressMiddleware`) or by configuring a landing page plugin. Direct HTML rendering is generally not required.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"If you are working with a modern Apollo Server (`@apollo/server`), this package is obsolete and should not be used. Remove `apollo-server-module-graphiql` from your `package.json`. If you truly need to use this specific legacy package, ensure it is correctly listed in `dependencies` and installed via `npm install`.","cause":"The package is not installed or has been removed. Or, you are attempting to use it in a project that migrated to a modern Apollo Server setup where it's no longer relevant.","error":"Error: Cannot find module 'apollo-server-module-graphiql'"},{"fix":"This indicates a fundamental mismatch in versions. You must migrate your entire Apollo Server application to `@apollo/server` (v4 or v5) and stop using `apollo-server-module-graphiql`. Consult the official Apollo Server migration guides for instructions on updating your server setup.","cause":"This error likely occurs when trying to use `apollo-server-module-graphiql` with `@apollo/server` (v4+), which has a significantly different API. The `ApolloServer` class in modern versions uses `start()` and `startStandaloneServer()` or `expressMiddleware()` for integration, not a direct `listen()` method in the same way as older `apollo-server` packages.","error":"TypeError: Cannot read properties of undefined (reading 'listen') on ApolloServer instance"}],"ecosystem":"npm"}