{"id":13518051,"url":"https://github.com/hasura/awesome-react-graphql","last_synced_at":"2025-04-23T16:33:36.801Z","repository":{"id":38206687,"uuid":"126986638","full_name":"hasura/awesome-react-graphql","owner":"hasura","description":"A curated collection of resources, clients and tools that make working with `GraphQL and React/React Native` awesome","archived":false,"fork":false,"pushed_at":"2020-12-22T18:35:38.000Z","size":44,"stargazers_count":734,"open_issues_count":1,"forks_count":88,"subscribers_count":25,"default_branch":"master","last_synced_at":"2024-04-14T09:11:12.127Z","etag":null,"topics":["awesome","awesome-list","awesomeness","graphql","react","react-native"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc-by-4.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hasura.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-27T12:58:36.000Z","updated_at":"2024-03-28T23:13:35.000Z","dependencies_parsed_at":"2022-08-26T21:41:40.710Z","dependency_job_id":null,"html_url":"https://github.com/hasura/awesome-react-graphql","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hasura%2Fawesome-react-graphql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hasura%2Fawesome-react-graphql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hasura%2Fawesome-react-graphql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hasura%2Fawesome-react-graphql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hasura","download_url":"https://codeload.github.com/hasura/awesome-react-graphql/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223779728,"owners_count":17201287,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","awesomeness","graphql","react","react-native"],"created_at":"2024-08-01T05:01:40.201Z","updated_at":"2024-11-10T08:25:24.755Z","avatar_url":"https://github.com/hasura.png","language":null,"readme":"# Awesome React GraphQL [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\n\u003e A curated collection of resources, clients and tools that make working with `GraphQL and React/React Native` awesome.\n\n## Contents\n\n- [General Resources](#general-resources)\n- [Clients](#clients)\n- [Developer Tools](#developer-tools)\n- [Tutorials](#tutorials)\n- [Boilerplates](#boilerplates-and-example-apps)\n- [Advanced Use Cases](#advanced-use-cases)\n- [GraphQL BaaS Providers](#graphql-baas-providers)\n- [Articles and Videos](#articles-and-videos)\n- [Stories](#stories)\n- [Books](#books)\n\n## General Resources\n\n- [GraphQL](http://graphql.org/learn/)\n- [ReactJS](https://reactjs.org/docs/hello-world.html)\n- [React Native](https://facebook.github.io/react-native/docs/getting-started.html)\n- [Redux](https://redux.js.org/)\n\n## Clients\n\n\u003e React and React Native clients for GraphQL\n\n- [Apollo](https://www.apollographql.com/): Apollo Client is a community-driven GraphQL client for React, JavaScript, and native platforms\n  - [Docs](https://www.apollographql.com/docs/react/)\n  - [Github](https://github.com/apollographql)\n  - [Spectrum](https://spectrum.chat/apollo)\n  - [Slack](https://www.apollographql.com/slack)\n- [Relay Modern](https://facebook.github.io/relay/): A JavaScript framework for building data-driven React applications\n  - [Docs](https://facebook.github.io/relay/docs/en/introduction-to-relay.html)\n  - [Github](https://github.com/facebook/relay)\n  - [Discord](https://discord.gg/0ZcbPKXt5bX40xsQ)\n- [AppSync](https://github.com/awslabs/aws-mobile-appsync-sdk-js): JavaScript GraphQL library for Offline, Sync, Sigv4. includes support for React Native\n  - [Docs](https://docs.aws.amazon.com/appsync/latest/devguide/welcome.html)\n- [urql](https://github.com/FormidableLabs/urql): Universal React Query Library\n\n## Developer Tools\n\n\u003e Tools for better development (debugging, linting, validation etc)\n\n- Code generators:\n  - [apollo-codegen](https://github.com/apollographql/apollo-codegen): Generate API code or type annotations based on a GraphQL schema and query documents\n  - [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator): GraphQL code generator with flexible support for custom templates\n- Linters:\n  - [eslint-plugin-graphql](https://github.com/apollographql/eslint-plugin-graphql): Check your GraphQL query strings against a schema\n- ReactJS Debugging Tools\n  - [Apollo Client Developer Tools](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm): Chrome extension for Apollo Client developer tools\n  - [Relay DevTools](https://chrome.google.com/webstore/detail/relay-devtools/oppikflppfjfdpjimpdadhelffjpciba): A Chrome Extension that creates a Relay tab in the developer tools interface for debugging apps in Chrome\n  - [Relay Devtools Electron](https://www.npmjs.com/package/relay-devtools): Standalone Relay DevTools App for debugging Relay outside Chrome\n- React Native Debugging Tools\n  - [Relay Devtools Electron](https://www.npmjs.com/package/relay-devtools): Standalone Relay DevTools App for debugging Relay outside Chrome\n- GraphQL Workflows:\n  - [GraphQL Playground](https://github.com/graphcool/graphql-playground): Powerful GraphQL IDE built on top of GraphiQL\n  - [GraphiQL Online](https://graphiql-online.com): An online version of GraphiQL with a configurable endpoint and headers.\n- Apollo Client Tools\n  - [Apollo Cache Updater](https://github.com/ecerroni/apollo-cache-updater) - Helper for updating the apollo cache after a mutation in scenarios where apollo's in-place update may not be sufficient.\n\n## Tutorials\n\n\u003e Awesome tutorials for using GraphQL with React and React Native\n\n- ReactJS\n  - [React + Apollo Tutorial](https://learn.hasura.io/graphql/react)\n  - [React + Relay Tutorial](https://www.howtographql.com/react-relay/0-introduction/)\n  - [(Video) Using GraphQL, ReactJS and Apollo to Create Amazing Apps](https://youtu.be/kXH2dbnHYA0)\n  - [React + Apollo Tutorial](https://www.howtographql.com/react-apollo/0-introduction/)\n  - [(Video) Getting Started with Relay Modern, React \u0026 GraphQL](https://www.youtube.com/watch?v=XeALXh37WeU)\n  - [(Video) Building a Real Time React Application with GraphQL \u0026 AWS AppSync](https://www.youtube.com/watch?v=qNkkPoq9D3k\u0026t=10s)\n  - [(Video) Building Full-Stack App, Including a GraphQL Server on Node.js \u0026 React Front-End (with Apollo)](https://www.youtube.com/watch?v=XeALXh37WeU)\n  - [(Video series) React Apollo New Rendered Props Components](https://www.youtube.com/watch?v=gF-peiFjG0o\u0026list=PLN3n1USn4xlnsOPMwzSG4RiaGvtKMNCmn): Learn about the new components in React Apollo. They use Rendered Props.\n- React Native\n  - [React Native + Apollo Tutorial](https://learn.hasura.io/graphql/react-native)\n  - [(Video series) Build a Twitter Clone with Apollo Graphql \u0026 React-Native](https://www.youtube.com/watch?v=33qP1QMmjv8)\n  - [How to setup React Native + GraphQL + Relay Modern](https://codeburst.io/how-to-setup-a-react-native-graphql-relay-modern-a6a5f6c18353)\n  - [Building Chatty](https://medium.com/react-native-training/building-chatty-a-whatsapp-clone-with-react-native-and-apollo-part-1-setup-68a02f7e11): A WhatsApp clone with React Native and Apollo\n  - [Code an App With GraphQL, React Native, and AWS AppSync: The API](https://code.tutsplus.com/tutorials/code-an-app-with-graphql-and-react-native--cms-30511)\n  - [Code an App With GraphQL, React Native and AWS AppSync: The App](https://code.tutsplus.com/tutorials/code-an-app-with-graphql-react-native-and-aws-appsync-the-app--cms-30569)\n  - [(Video series) React Native and Prisma GraphQL eCommerce Project](https://www.youtube.com/watch?v=nyE6shIRzxM\u0026list=PLN3n1USn4xlmqhVdKMurNREwtiUpq-SFy)\n- Miscellaneous\n  - [A cartoon intro to facebook's Relay](https://code-cartoons.com/a-cartoon-intro-to-facebook-s-relay-part-1-3ec1a127bca5)\n  - [A complete React with GraphQL Tutorial](https://www.robinwieruch.de/react-with-graphql-tutorial/)\n  - [A complete React with Apollo and GraphQL Tutorial](https://www.robinwieruch.de/react-graphql-apollo-tutorial/)\n\n## Boilerplates and Example Apps\n\n\u003e Boilerplates and examples for a headstart in development\n\n- ReactJS\n  - [ReactQL](https://reactql.org/): Universal React+GraphQL starter kit\n    - [Docs](https://reactql.org/docs/)\n    - [Github](https://github.com/reactql/cli)\n  - [UniversalRelayBoilerplate](https://github.com/codefoundries/UniversalRelayBoilerplate)\n  - [React AppSync Starter App](https://github.com/aws-samples/aws-mobile-appsync-events-starter-react)\n  Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra.\n  - [Relay Skeleton](https://github.com/fortruce/relay-skeleton) - Relay project skeleton.\n  - [Next.js Serverless with Apollo](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/nextjs-8-serverless/with-apollo)\n  - [Next.js With Apollo](https://github.com/zeit/next.js/tree/master/examples/with-apollo) - Boilerplate for building Next.js apps with Apollo.\n  - [Universal React Apollo](https://github.com/WeLikeGraphQL/universal-react-apollo-example) - Universal React Apollo Example App with Webpack, Recompose, CSS Modules, and other cool stuff.\n  - [GitHunt React](https://github.com/apollographql/GitHunt-React)\n  - [Extensive React + Apollo + GraphQL GitHub Client](https://github.com/rwieruch/react-graphql-github-apollo)\n  - [React + GraphQL GitHub Client](https://github.com/rwieruch/react-graphql-github-vanilla)\n  - [A simple React GraphQL Client](https://github.com/rwieruch/react-graphql-client)\n  - [Apollo-Link-State in React](https://github.com/rwieruch/react-apollo-link-state-example)\n  - [Mocking a Apollo Client in React for Testing](https://github.com/rwieruch/react-apollo-client-mocking-example)\n  - [Testing Apollo Client in React](https://github.com/rwieruch/react-apollo-client-testing-example)\n- React Native\n  - [WhatsApp Clone](https://github.com/srtucker22/chatty)\n  - [frontpage-react-native-app](https://github.com/apollographql/frontpage-react-native-app): Apollo \"hello world\" app, for React Native\n  - [pokedex-react-native](https://github.com/learnapollo/pokedex-react-native)\n  - [GraphQL starter application with Realtime and Offline functionality using AWS AppSync](https://github.com/aws-samples/aws-mobile-appsync-events-starter-react-native)\n  - [React, Apollo \u0026 GraphQL Starter Kits](https://github.com/graphql-boilerplates/react-fullstack-graphql/): Fullstack boilerplate project with a database and best practices for authentication, filtering, pagination and\n\n## Advanced Use Cases\n\n- Server-side Rendering\n  - [(Video) React NYC- Server-side Rendering with GraphQL](https://www.youtube.com/watch?v=YMuigDra88M)\n  - [Understanding Server-side rendering with Apollo](https://dev-blog.apollodata.com/how-server-side-rendering-works-with-react-apollo-20f31b0c7348)\n- Offline apps\n  - [Offline GraphQL Queries with Redux Offline and Apollo](http://www.petecorey.com/blog/2017/07/24/offline-graphql-queries-with-redux-offline-and-apollo/)\n- Realtime\n  - [(Video) Robert Zhu - Realtime React Apps with GraphQL - React Conf 2017](https://www.youtube.com/watch?v=AYbVMNtO-ro)\n  - [Polling](https://dev-blog.apollodata.com/dynamic-graphql-polling-with-react-and-apollo-client-fb36e390d250): Dynamic GraphQL polling with React and Apollo Client\n  - [Subscriptions with Relay Modern](https://facebook.github.io/relay/docs/en/subscriptions.html)\n  - [Subscriptions with Apollo Client](https://www.apollographql.com/docs/react/advanced/subscriptions.html): Learn how to achieve realtime data with GraphQL subscriptions using Apollo Client.\n- [Gatsby](https://www.gatsbyjs.org/): Blazing-fast static site generator for React\n- JWT\n  - [Ultimate guide to handling JWTs on frontend clients](https://blog.hasura.io/best-practices-of-using-jwt-with-graphql/)\n- Performance Tracing\n  - [Performance Tracing for GraphQL with Apollo and it’s friends](https://hackernoon.com/performance-tracing-for-graphql-with-apollo-and-its-friends-877adf733322)\n\n## Server Side Tools\n\n\u003e Get a GraphQL backend for your applications using these service providers\n\n- [AWS AppSync](https://aws.amazon.com/appsync/): Build data-driven apps with real-time and offline capabilities\n- [Graphcool](https://graph.cool): Self-Hosted GraphQL BaaS\n- [Hasura](https://hasura.io): Instant GraphQL APIs on Postgres\n- [Postgraphile](https://www.graphile.org): Rapidly build highly customisable GraphQL APIs\n- [Prisma](https://www.prisma.io/): Turn your database into a GraphQL API.\n\n## Articles and Videos\n\n### Articles\n\n- [So what’s this GraphQL thing I keep hearing about?](https://medium.freecodecamp.org/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf)\n- [Thinking in Graphs](http://graphql.org/learn/thinking-in-graphs/)\n- [What are the benefits of using GraphQL and why it surpasses REST](https://blog.hellocomet.co/graphql-benefits-api/)\n- [React-powered Gatsby with GraphQL for E-Commerce](https://snipcart.com/blog/react-graphql-grav-cms-headless-tutorial) - A guide to building an e-commerce site with Gatsby and GraphQL using Grav as a headless CMS. Demo included. \n\n### Videos\n\n- [From REST to GraphQL](https://www.youtube.com/watch?v=ntBU5UXGbM8)\n- [Data fetching for React Applications at Facebook](https://www.youtube.com/watch?v=9sc8Pyc51uU)\n\n## Stories\n\n\u003e Good and bad experiences\n\n- [The Evolution of React and GraphQL at Facebook and Beyond](https://developers.facebook.com/videos/f8-2017/the-evolution-of-react-and-graphql-at-facebook-and-beyond/)\n- [(Video) Lessons from 4 Years of GraphQL](https://www.youtube.com/watch?v=zVNrqo9XGOs)\n- [React, Relay and GraphQL: Under the Hood of The Times Website Redesign](https://open.nytimes.com/react-relay-and-graphql-under-the-hood-of-the-times-website-redesign-22fb62ea9764)\n- [2017: The year in GraphQL](https://dev-blog.apollodata.com/2017-the-year-in-graphql-124a050d04c6)\n- [Harry Wolf: Experiences with GraphQL](http://hswolff.com/blog/experiences-with-graphql/)\n- [JetRuby: Our experience with GraphQL](https://expertise.jetruby.com/our-experience-with-node-js-react-graphql-c40007ad4373)\n\n## Books\n- [GraphQL in Action](https://www.manning.com/books/graphql-in-action)\n- [Fullstack GraphQL Applications with GRANDstack](https://www.manning.com/books/fullstack-graphql-applications-with-grandstack)\n","funding_links":[],"categories":["Technical","Others","Other Lists","Web Development"],"sub_categories":["awesome-*","TeX Lists"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhasura%2Fawesome-react-graphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhasura%2Fawesome-react-graphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhasura%2Fawesome-react-graphql/lists"}