GraphiQL vs Mercurius
GraphiQL
graphiql.devMercurius
mercurius.devSide by side
| Figure | GraphiQL | Mercurius |
|---|---|---|
| Price from | Free | — |
| Free plan | Yes | — |
| Free trial | — | — |
| Open source | — | — |
| Web | Yes | — |
| API | — | Yes |
| Self-hosted | Yes | Yes |
| Plans published | 1 | 0 |
| Spec score · GraphQL Tools | 8.4 (#3) | 6.5 (#24) |
| Installation | The package installation instructions list React, React DOM, and GraphQL as peer dependencies. | The documented installation command is npm i fastify mercurius graphql, with a Yarn alternative also provided. |
| Integrations | The project provides examples for CDN ESM, Webpack, Create React App, and Parcel, and its repository describes GraphQL language tooling for CodeMirror, Monaco, and Visual Studio Code. | The integrations documentation lists Nexus, TypeGraphQL, GQLoom, Prisma, mercurius-integration-testing, OpenTelemetry, and NestJS. |
| License | The GraphiQL repository describes the code as open source under the MIT license. | The repository lists the project under the MIT license. |
| Security | The project warns that GraphiQL versions below 1.4.7 are vulnerable to an XSS attack when connected to an untrusted GraphQL server. | Mercurius includes CSRF prevention, which the documentation says is disabled by default and must be enabled in configuration. |
Plans
In their own words
GraphiQL
GraphiQL is a free, interactive, in-browser IDE for GraphQL. Its editor supports the latest GraphQL specification, with syntax highlighting, type-aware suggestions, query and variable completion, and real-time error highlighting. A searchable documentation explorer can display Markdown, and the built-in query history and documentation explorer are available as plugins. GraphiQL can preserve state in browser localStorage and provides a plugin API for extending its interface. It is also a React package for embedding the IDE in an application; a component needs a fetcher function that sends requests to a GraphQL API. The toolkit fetcher supports HTTP, multipart incremental delivery, and subscriptions through graphql-ws or the legacy WebSocket protocol. Developers can customize the interface with React props and children, while CSS variables are the supported way to change its appearance. GraphiQL is open source under the MIT license. Its project offers a progressive web app demo and examples for CDN, Webpack, Create React App, and Parcel.