hasura/awesome-react-graphql

Awesome React GraphQL

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

Contents

• General Resources
• Clients
• Developer Tools
• Tutorials
• Boilerplates
• Advanced Use Cases
• GraphQL BaaS Providers
• Articles and Videos
• Stories
• Books

General Resources

• GraphQL
• ReactJS
• React Native
• Redux

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
  • React Native + Apollo Tutorial
  • (Video series) Build a Twitter Clone with Apollo Graphql & React-Native
  • How to setup React Native + GraphQL + Relay Modern
  • Building Chatty: A WhatsApp clone with React Native and Apollo
  • Code an App With GraphQL, React Native, and AWS AppSync: The API
  • Code an App With GraphQL, React Native and AWS AppSync: The App
  • (Video series) React Native and Prisma GraphQL eCommerce Project
• Miscellaneous
  • A cartoon intro to facebook's Relay
  • A complete React with GraphQL Tutorial
  • A complete React with Apollo and GraphQL Tutorial

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

• From REST to GraphQL
• Data fetching for React Applications at Facebook

Stories

Good and bad experiences

• The Evolution of React and GraphQL at Facebook and Beyond
• (Video) Lessons from 4 Years of GraphQL
• React, Relay and GraphQL: Under the Hood of The Times Website Redesign
• 2017: The year in GraphQL
• Harry Wolf: Experiences with GraphQL
• JetRuby: Our experience with GraphQL

Books

• GraphQL in Action
• Fullstack GraphQL Applications with GRANDstack