This article was originally published on the Hasura blog. If there are formatting errors in the article below, we urge you to please go to our blog and read it there. Thanks! :)

Since GraphQL was open-sourced in 2015, it has beengaining popularity and adoption from the developer community, with developers looking for awesome ways to build stuff with and for GraphQL.

If you are trying your hand at GraphQL, building a new project, or looking for cool ways developers build for GraphQL. By leveraging open-source GraphQL projects and implementing GraphQL tools in your projects, you can understand GraphQL best practices, techniques, and proper ways to set up GraphQL in production, which can improve and accelerate your GraphQL development experience. In this article, we’ve compiled a list of the top open-source GraphQL projects and tools based on their stars on GitHub. Our list contains a mix of GraphQL integrated development environments (IDEs), clients, and servers to help you explore the GraphQL metaverse.

Top 3 GraphQL IDEs

GraphQL integrated development environments (IDEs) are software applications that combine common developer tools into a single graphical user interface (GUI) for viewing, writing, and running GraphQL operations.

1. GraphiQL

⭐ (13k) GitHub stars | 🧑‍🤝‍🧑 (202) Contributors |⏳ (Aug 2015)First release date

What: GraphiQL is a popular and lightweight in-browser IDE for exploring GraphQL APIs. It was created by the same Facebook team that created the GraphQL spec and released alongside in 2015.

Features :

• GraphiQL supports the complete GraphQL language spec, including queries, mutations, fragments, and unions. This means that with GraphiQL, you have all you need to write, validate, and test GraphQL APIs.
• GraphiQL displays snippets of the schema documentation as you type and highlights errors in syntax in real-time, so you don't make mistakes when writing queries and know what you are querying for.
• GraphiQL keeps a running history of your queries. If you use these queries frequently, you can "star" them to keep them at the top of your history. This can save you time, so you can quickly refer to frequently used queries.

Why we think you should try it out:

• GraphiQL is the highest-rated GraphQL IDE on GitHub, with an active developer community of over 200 contributors and180 thousand weekly downloads on npm. With GraphiQL, you can set up an IDE instance for your server or a more advanced web or desktop GraphQL IDE experience for your framework or plugin, likethis one we built graphql- online.

2. GraphQL Playground

⭐ (7.7k) GitHub stars |🧑‍🤝‍🧑 (103) Contributors |⏳ (Aug 2017)First release date

What: GraphQL Playground is a popular IDE for exploring GraphQL APIs. It was created by Prisma and built on top of GraphiQL.

Features:

• GraphQL Playground providesmore intuitive API documentation, schema exploration, and GraphQL query debugging experience than GraphiQL with a much nicer UI. These features improve development workflows by writing, validating, and running GraphQL queries much smoother.
• GraphQL Playground features automatic in-session schema reload, which helps avoid schema changes and breakdown during query sessions.
• With GraphQL Playground, you can share your GraphQL Playground with other developers using the GraphQL share bin option. This can help when collaborating on projects with team members.

Why we think you should try it out:

• AlthoughGraphQL Playground has been retired and donated to the GraphQL Foundation by Prisma, it remains one of the most actively used GraphQL tools, with over400 thousand weekly downloads on npm. The project is constantly updated with bug fixes and security patches, and the GraphQL Foundation is actively working onGraphQL Playground 2.0). You can embed GraphQL Playground into your application, either as a React component in your front-end app or on the server-side as middleware for frameworks such as Express, Hapi, or Koa.

3. GraphQL Editor

⭐ (5.5k) GitHub stars |🧑‍🤝‍🧑 (14) Contributors |⏳ (Sep 2018)First release date

What : GraphQL Editor is an IDE for creating and understanding GraphQL schemas by using a visual blocks system. GraphQL Editor makes understanding GraphQL schemas a lot easier.

Features :

• GraphQL Editor supports API stitching. A developer can import schemas from other projects and use the types declared within the imported schema in the current projects. This feature speeds up the time required to create GraphQL schemas.
• GraphQL Editor supports query preview. It ships with an integration of GraphiQL that will render a GraphQL API under development with mock data. This feature accelerates development time as front-end developers can easily test and simulate GraphQL APIs without relying on backend engineers to create the GraphQL APIs.
• With GraphQL Editor, you can create a block diagram of all your GraphQL entities. This quality helps developers visualize and validate their GraphQL schema quickly.

Why we think you should try it out:

• GraphQL Editor has an active GitHub community with a low "open issue count" (22) on GitHub. With GraphQL Editor, you can configure graphical elements within the IDE to create visual GraphQL entities that will also be rendered as code in the GraphQL type language right within the IDE. Also, you can work the other way and create the entity in code and have it rendered graphically in the GraphQL editor object palette.

Top 3 GraphQL Clients

GraphQL clients are software libraries/frameworks that interface with a GraphQL server/API data. GraphQL clients handle sending queries and mutations to a GraphQL API while abstracting lower-level networking details or maintaining a local cache.

1. Apollo Client

⭐ (17k) GitHub stars |🧑‍🤝‍🧑 (640) Contributors |⏳ (Feb 2016)First release date

What: Apollo Client is a comprehensive GraphQL client that enables you to manage local and remote data from GraphQL APIs.

Features:

• Apollo Client requests and caches data from your queries and updates your user interface, which reduces the labor involved in creating client-side applications that interact with GraphQL APIs.
• Apollo Client has built-in pagination functionality that makes it easy to implement pagination in your client application.
• Apollo Client 3.0 features reactive variables. These variables can store data of any type and can be accessed anywhere in the application. Reactive variables can be an advantageous mechanism for representing local states outside the Apollo Client cache.

Why we think you should try it out:

• Apollo Client is one of the most popular GraphQL projects with over 640 contributors and 114 thousand users on GitHub. With Apollo Client, you canbuild robust and scalable web apps for many UI frameworks (React, Angular, Vue, iOS, Android) that easily connect to GraphQL APIs.

2. Relay

⭐ (16.2k) GitHub stars |🧑‍🤝‍🧑 (484) Contributors |⏳ (Aug 2015)First release date

What: Relay is a JavaScript framework developed by Facebook for managing and fetching data from GraphQL APIs in React applications.

Features:

• Relay supports declarative data fetching. Declare your data requirements using GraphQL and let Relay figure out how and when to fetch your data. This feature reduces the time and complexity required to consume GraphQL APIs in React applications.
• Relay allows deferred queries. This feature is particularly useful to render long pages, for example, a news feed where you find a long list of posts where you need to define data priorities.
• Relay has built-in features for local memory data caching. Relay associates each piece of data with a unique ID compares server data with the local memory cache via that unique identifier and updates the differences. This is useful when dealing with bandwidth-constrained networks.

Why we think you should try it out:

• Relay was created by the original GraphQL creators and continues to release new updates and features. It is heavilyoptimized for performance and comes with an opinionated structure that helps you manage a high level of complexity, enabling developers to build React applications confidently.

3. URQL

⭐ (6.6k) GitHub stars |🧑‍🤝‍🧑 (155) Contributors |⏳ (May 2019)First release date

What: URQL is a lightweight, extensible GraphQL client. It is built to be highly customizable and versatile and exposes a set of helpers for several frameworks (React, Vue, Svelte).

Features:

• Caching in URQL is fully customizable through the exchanges. It supports "Document Caching" for content-heavy pages and "Normalized Caching" for dynamic and data-heavy applications. This allows you to easily set up caching on your client applications based on your specific requirements.
• URQL has first-class support for functionality such as offline mode, file uploads, authentication, and Next.js. This support means you spend less time implementing features such as authentication in your client application.
• URQL provides an extensibility mechanism that allows app developers to scale and customize the URQL GraphQL library to suit their needs.

Why we think you should try it out:

• URQL has an active developer community with over100 thousand weekly downloads on npm and a low "open issue count" (21) on GitHub. URQL gives you complete control over your GraphQL operations and results via "exchanges." URQL exchanges allow you to customize your data layer to suit your needs, helping you build web applications with ease.

Top 3 Custom GraphQL Servers

GraphQL servers expose your data as a GraphQL API that your client applications can query. GraphQL servers do the heavy lifting of ensuring that the proper quantity of data is retrieved using the fewest possible database lookups and API calls. In this list, we will look at different ways to write a custom GraphQL server from scratch.

1. Apollo Server

⭐ (12.1k) GitHub stars |🧑‍🤝‍🧑 (464) Contributors |⏳ (Apr 2016)First release date

What: Apollo Server is an open-source, GraphQL server used to build and run GraphQL APIs on Node.js. With Apollo server, you define the GraphQL schema design, and Apollo server takes care of the mechanics of the GraphQL API.

Features:

• Apollo Server supports automatic persisted queries, which lets clients send a calculated hash instead of a complete query string over the network. This technique reduces query latency and bandwidth requirements, especially for large and complex queries.
• Apollo Server includes an integrated metrics reporting agent out of the box, making it easy to diagnose GraphQL API performance problems.
• Apollo Server includes standard error handling capabilities that make it easy to handle re-authentication and build error-aware UI components and interactions.

Why we think you should try it out:

• Apollo Server has an active developer community with over 400 contributors and460 thousand weekly downloads on npm. Apollo server ships with everything you need to build production-ready self-documenting GraphQL APIs with ease.

2. Express GraphQL

⭐ (6.2k) GitHub stars |🧑‍🤝‍🧑 (60) Contributors |⏳ (Aug 2015)First release date

What: The Express GraphQL module from Express provides a simple way to create a GraphQL server in Node.js. With Express GraphQL, you can create a GraphQL HTTP server with any HTTP web framework that supports connect-styled middleware, including Connect itself, Express, and Restify.

Features:

• Express extends its middleware capabilities to GraphQL endpoints. This capability allows you to set up middleware logic such as authentication before hitting the GraphQL API endpoint.
• Express GraphQL ships with some existing Express.js features such as support for cross-origin resource sharing (CORS), session management, and request body-parser, which means you do not need to reinvent the wheel for features like these when setting up your GraphQL APIs.
• Express GraphQL includes a TypeScript declaration file which enables auto-complete in compatible editors and type information for TypeScript projects.

Why we think you should try it out:

• With over600 thousand weekly downloads on npm, Express GraphQL is one of the most used GraphQL servers. With Express GraphQL, you can easily set up production-ready GraphQL APIs in Node.js.

3. Hot Chocolate

⭐ (3k) GitHub stars |🧑‍🤝‍🧑 (140) Contributors |⏳ (Jan 2018)First release date

What: Hot Chocolate is an open-source GraphQL server used to create GraphQL APIs for the Microsoft .NET platform. It is fully compliant with the newest GraphQL spec and compatible with all GraphQL compliant clients, such as Relay and Apollo Client.

Features:

• Hot Chocolate has built-in support for data loaders, making batching and caching for query results from databases much faster.
• Hot Chocolate supports .NET Core authorization policies, so you can use authorization directives on your schema fields to enable base field authorization for better GraphQL API security.
• Hot Chocolate comes with built-in filtering and pagination, offering rich query capabilities through your GraphQL API.

Why we think you should try it out:

• Hot Chocolate is one of the GraphQL projects expanding the GraphQL community beyond Javascript/Node and is gaining popularity in the .NET ecosystem, withover 2 million downloads on NuGet. Hot Chocolate is quite easy to set up and has an active developer community that continuously improves and implements new features. Hot Chocolate takes away the complexity involved in building GraphQL servers and APIs in .NET.

Get Instant GraphQL APIs on All Your Data With Hasura

Hasura GraphQL Engine is a GraphQL server that gives you real-time, instant GraphQL APIs over your database. Hasura makes it easy to build your backend GraphQL app or add a GraphQL layer to your existing application.

Features:

• Hasura can simultaneously connect multiple databases to a single instance of the Hasura GraphQL Engine. This feature is particularly useful to enable GraphQL APIs on databases with different workloads, i.e., one database for search and another database for high-volume transactions.
• Hasura GraphQL Engine offers built-in filtering, pagination, and merging remote schemas. This feature accelerates the time required to build and ship production-ready GraphQL APIs.
• Hasura also caches your GraphQL query plan by storing the query string and variable values in an internal cache along with the prepared SQL statement. This technique leads to fast, highly optimized database calls.

Why we think you should try it out:

• Hasura has an active developer community with consistent feature updates and is used byFortune 500 companies such as Philips. This year alone, Hasura has included support for BigQuery and MS SQL Server databases in addition to Postgres. Additionally, withHasura Cloud you have a fully managed, production-ready GraphQL API as a service to help you build modern apps faster.Get started in 30 seconds!

Your GraphQL Project or Tool Could Be Next

Many of these GraphQL projects and tools began as niche developments and are now being used by top companies likeOptum,Shopify, andNetflix. For example, the URQL GraphQL client, launched in 2019 to provide a lightweight, intuitive alternative to GraphQL clients like Relay and Apollo, now has over 100 thousand weekly downloads on npm. The GraphQL developer community is growing, and your GraphQL project could be the next one to take center stage.

You can also join the fantastic GraphQL developer community byapplying to become a contributor to a GraphQL project or tool. Many GraphQL projects and tools depend on contributors to maintain and develop new features and plugins.

If you're working on an open-source GraphQL tool or project or know any awesome ones we should check out, reach out and let us know onTwitter orDiscord, and we'll take a look!