Top 23 TypeScript GraphQL Projects
-
react-query
⚛️ Hooks for fetching, caching and updating asynchronous data in React
To make the call to the API, I used useQuery hook from the react-query package (https://github.com/tannerlinsley/react-query). This hook will manage the fetch for us and return an object with data, isLoading, error, and more. Thus, we avoid the need to maintain the different states of the fetch process. Also, it provides other advantages like caching, updating out-of-date data in the background, performance optimizations, and many more. If you want to know more about react-query visit its documentation https://react-query.tanstack.com/overview.
-
apollo-client
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server
for example using one of this helper functions in the "new InMemoryCache" instance: helper functions
-
RxDB
🔄 A realtime Database for JavaScript Applications
-
Bit
Build, distribute, and collaborate on components.
Latest mention: What do people use to build websites for documentation for their framework/library? | reddit.com/r/Frontend | 2020-12-21Bit is great for component-sharing / documentation, but if you want to use it for free for private projects, you'll need to host the server yourself.
-
graphiql
GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.
Latest mention: GraphQL via HTTP in five ways: cURL, Python, JavaScript, Ruby and PHP | dev.to | 2021-01-14Before we can get started, we need a query and an API endpoint to hit. Getting both of those items via Contentful is a breeze. For the API endpoint, we can use Contentful's API Base URL https://graphql.contentful.com, taken from the GraphQL docs. To find a query we can use GraphiQL, an in-browser GraphQL IDE. Open up https://graphql.contentful.com/content/v1/spaces/{SPACE_ID}/explore?access_token={accessToken}, replacing the spaceID and accessToken with your own.
-
apollo-server
🌍 GraphQL server for Express, Connect, Hapi, Koa and more
If you're using hot chocolate (or any other GraphQL server that isn't apollo server) and want to use apollo studio for metrics, field usage data and schema validation (plus more), you'll need to follow the docs to send metrics from your GraphQL server to our trace ingestion endpoint in the documented format. I've seen it done and it's not that bad. You can view the apollo server plugin implementation to see how it's done as an example.
-
postgraphile
Execute one command (or mount one Node.js middleware) and get an instant high-performance GraphQL API for your PostgreSQL database!
-
graphql-playground
🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)
GraphQL Playground is a graphical, interactive, in-browser GraphQL IDE, created by Prisma and based on GraphiQL. - Apollo docs
-
API Platform
Create REST and GraphQL APIs, scaffold Jamstack webapps, stream changes in real-time.
-
graphql-yoga
🧘 Fully-featured GraphQL Server with focus on easy setup, performance & great developer experience
Latest mention: What's the best stack for quickly hacking together prototypes and experiments? | reddit.com/r/reactjs | 2020-12-30GraphQL Yoga - Good convo to have a quick GQL service.
-
graphql-code-generator
A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.
Latest mention: Create a sample app with TypeScript, React, typeorm, type-graphql. graphql-code-generator while reading "Learning GraphQL" | dev.to | 2021-01-23Used graphql-code-generator to generate the types for TypeScript from the GraphQL schema that the back-end generated.
-
quicktype
Generate types and converters from JSON, Schema, and GraphQL
This is a container packaging quicktype to generate Type classes from Json Schema. Purpose of this pacakge is to provide convenience of avoiding installing all tools and requirements to use quicktype to generate type classes from json schema
-
TypeGraphQL
Create GraphQL schema and resolvers with TypeScript, using classes and decorators!
Latest mention: Create a sample app with TypeScript, React, typeorm, type-graphql. graphql-code-generator while reading "Learning GraphQL" | dev.to | 2021-01-23Used typeorm and type-graphql to define the GraphQL schema and DB schema conveniently. type-graphql automatically generates the schema file :) It might be better o try Nest.js...?
-
express-graphql
Create a GraphQL HTTP server with Express.
That leaves the final step, which is easily handled with express-graphql: a simple Express middleware, with just 4 dependencies that handle content negotiation & body parsing. That works for Express or Connect, and there's similar tiny packages available for most other servers.
-
webiny-js
Platform for building serverless applications and APIs (Node.js, React, GraphQL)
Latest mention: Webiny - Opensource platform for building serverless applications and APIs. | dev.to | 2020-10-12Check their github : https://github.com/webiny/webiny-js
-
searchkit
GraphQL API & React UI components for Elasticsearch. The easiest way to build a great search experience
-
graphql-request
Minimal GraphQL client supporting Node and browsers for scripts or simple apps
To display the data we'll be using the react-table library. We would like to use the pagination query to get only the number of documents to be displayed on one page. To perform the API calls to fauna graphql endpoint, I'll use a react-query library with graphql-request.
-
taskcafe
An open source project management tool with Kanban boards
Latest mention: Taskcafe 0.3.1 - an open source project management tool | reddit.com/r/selfhosted | 2020-12-25I still find it weird that Import from Trello is not even on the roadmap. I do understand that the developer and an average user has different views on what is an important feature, but i still think this a pretty important feature.
-
prisma-examples
🚀 Ready-to-run Prisma example projects
I'd love to hear what you think of Prisma if you ever get a chance to try it out! The best ways for exploring it are by following the Quickstart or running an example (e.g. for REST, GraphQL, gRPC, ...).
-
vendure
A headless GraphQL ecommerce framework for the modern web
Hi! You might be interested to check out my project, Vendure (https://github.com/vendure-ecommerce/vendure). It's a headless graphql e-commerce framework written in TypeScript.
-
Coral
A better commenting experience from Vox Media
-
graphql-subscriptions
:newspaper: A small module that implements GraphQL subscriptions for Node.js
To add this, I can just expand the basic setup above. To do so, I do actually use a couple of small Apollo modules! Most can be picked and configured independently. For this case, graphql-subscriptions provides a little bit of pubsub logic that works within resolvers, and subscriptions-transport-ws integrates that into Express to handle the websockets themselves. Super helpful
-
porn-vault
💋 Manage your ever-growing porn collection. Using Vue & GraphQL
Porn Vault: Full disclosure, while I do consider myself relatively technologically literate, I am by no means a coder, software developer, or anything of the like. I struggled to even install Porn Vault at first because I didn't conceptualize that it was browser-based at first. A lot of my issues with Porn Vault are centered around my own ignorance of some of the program's basic workings, so I don't know that I can give a comprehensive review that someone who knows how to 'pop the hood' on the program might.
Index
What are some of the best open-source GraphQL projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | react-query | 17,030 |
| 2 | apollo-client | 15,488 |
| 3 | RxDB | 15,036 |
| 4 | Bit | 12,805 |
| 5 | graphiql | 11,653 |
| 6 | apollo-server | 10,932 |
| 7 | postgraphile | 9,796 |
| 8 | graphql-playground | 6,833 |
| 9 | API Platform | 6,431 |
| 10 | graphql-yoga | 6,255 |
| 11 | graphql-code-generator | 6,161 |
| 12 | quicktype | 5,900 |
| 13 | TypeGraphQL | 5,822 |
| 14 | express-graphql | 5,731 |
| 15 | webiny-js | 4,118 |
| 16 | searchkit | 4,065 |
| 17 | graphql-request | 3,248 |
| 18 | taskcafe | 2,168 |
| 19 | prisma-examples | 1,917 |
| 20 | vendure | 1,781 |
| 21 | Coral | 1,565 |
| 22 | graphql-subscriptions | 1,367 |
| 23 | porn-vault | 1,364 |