About awesome-react-graphql

A curated collection of resources, clients, and tools for working with GraphQL and React or React Native. The repository organizes content into several categories, including general resources on GraphQL, ReactJS, React Native, and Redux, along with clients like Apollo, Relay Modern, AWS AppSync, and urql. Developer tools section features code generators such as apollo-codegen and graphql-code-generator, linters like eslint-plugin-graphql, debugging extensions for both ReactJS and React Native, GraphQL workflows including GraphQL Playground and GraphiQL Online, and Apollo Client utilities. Tutorials cover ReactJS with Apollo and Relay, while additional sections offer boilerplates and example apps, advanced use cases, GraphQL backend-as-a-service providers, articles and videos, real-world stories, and recommended books. The list serves both beginners learning to integrate GraphQL into React applications and experienced developers seeking advanced tooling and patterns for production projects.

h

Published by

hasura

Visit View Profile

README.md

View on GitHub

Awesome React GraphQL

A curated collection of resources, clients and tools that make working with GraphQL and React/React Native awesome.

General Resources

Clients

React and React Native clients for GraphQL

Apollo: Apollo Client is a community-driven GraphQL client for React, JavaScript, and native platforms
- Docs
- Github
- Spectrum
- Slack
Relay Modern: A JavaScript framework for building data-driven React applications
- Docs
- Github
- Discord
AppSync: JavaScript GraphQL library for Offline, Sync, Sigv4. includes support for React Native
- Docs
urql: Universal React Query Library

Developer Tools

Tools for better development (debugging, linting, validation etc)

Code generators:
- apollo-codegen: Generate API code or type annotations based on a GraphQL schema and query documents
- graphql-code-generator: GraphQL code generator with flexible support for custom templates
Linters:
- eslint-plugin-graphql: Check your GraphQL query strings against a schema
ReactJS Debugging Tools
- Apollo Client Developer Tools: Chrome extension for Apollo Client developer tools
- Relay DevTools: A Chrome Extension that creates a Relay tab in the developer tools interface for debugging apps in Chrome
- Relay Devtools Electron: Standalone Relay DevTools App for debugging Relay outside Chrome
React Native Debugging Tools
- Relay Devtools Electron: Standalone Relay DevTools App for debugging Relay outside Chrome
GraphQL Workflows:
- GraphQL Playground: Powerful GraphQL IDE built on top of GraphiQL
- GraphiQL Online: An online version of GraphiQL with a configurable endpoint and headers.
Apollo Client Tools
- Apollo Cache Updater - Helper for updating the apollo cache after a mutation in scenarios where apollo's in-place update may not be sufficient.

Tutorials

Awesome tutorials for using GraphQL with React and React Native

ReactJS
- React + Apollo Tutorial
- React + Relay Tutorial
- (Video) Using GraphQL, ReactJS and Apollo to Create Amazing Apps
- React + Apollo Tutorial
- (Video) Getting Started with Relay Modern, React & GraphQL
- (Video) Building a Real Time React Application with GraphQL & AWS AppSync
- (Video) Building Full-Stack App, Including a GraphQL Server on Node.js & React Front-End (with Apollo)
- (Video series) React Apollo New Rendered Props Components: Learn about the new components in React Apollo. They use Rendered Props.
React Native
Miscellaneous

Boilerplates and Example Apps

Boilerplates and examples for a headstart in development

ReactJS
- ReactQL: Universal React+GraphQL starter kit
  - Docs
  - Github
- UniversalRelayBoilerplate
- React AppSync Starter App Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra.
- Relay Skeleton - Relay project skeleton.
- Next.js Serverless with Apollo
- Next.js With Apollo - Boilerplate for building Next.js apps with Apollo.
- Universal React Apollo - Universal React Apollo Example App with Webpack, Recompose, CSS Modules, and other cool stuff.
- GitHunt React
- Extensive React + Apollo + GraphQL GitHub Client
- React + GraphQL GitHub Client
- A simple React GraphQL Client
- Apollo-Link-State in React
- Mocking a Apollo Client in React for Testing
- Testing Apollo Client in React
React Native
- WhatsApp Clone
- frontpage-react-native-app: Apollo "hello world" app, for React Native
- pokedex-react-native
- GraphQL starter application with Realtime and Offline functionality using AWS AppSync
- React, Apollo & GraphQL Starter Kits: Fullstack boilerplate project with a database and best practices for authentication, filtering, pagination and

Advanced Use Cases

Server-side Rendering
- (Video) React NYC- Server-side Rendering with GraphQL
- Understanding Server-side rendering with Apollo
Offline apps
- Offline GraphQL Queries with Redux Offline and Apollo
Realtime
- (Video) Robert Zhu - Realtime React Apps with GraphQL - React Conf 2017
- Polling: Dynamic GraphQL polling with React and Apollo Client
- Subscriptions with Relay Modern
- Subscriptions with Apollo Client: Learn how to achieve realtime data with GraphQL subscriptions using Apollo Client.
Gatsby: Blazing-fast static site generator for React
JWT
- Ultimate guide to handling JWTs on frontend clients
Performance Tracing
- Performance Tracing for GraphQL with Apollo and it’s friends

Server Side Tools

Get a GraphQL backend for your applications using these service providers

AWS AppSync: Build data-driven apps with real-time and offline capabilities
Graphcool: Self-Hosted GraphQL BaaS
Hasura: Instant GraphQL APIs on Postgres
Postgraphile: Rapidly build highly customisable GraphQL APIs
Prisma: Turn your database into a GraphQL API.

Articles and Videos

Articles

So what’s this GraphQL thing I keep hearing about?
Thinking in Graphs
What are the benefits of using GraphQL and why it surpasses REST
React-powered Gatsby with GraphQL for E-Commerce - A guide to building an e-commerce site with Gatsby and GraphQL using Grav as a headless CMS. Demo included.

Videos

Stories

Good and bad experiences

awesome-react-graphql