A curated collection of resources, clients and tools that make working with
GraphQL and React/React Nativeawesome.
- General Resources
- Clients
- Developer Tools
- Tutorials
- Boilerplates
- Advanced Use Cases
- GraphQL BaaS Providers
- Articles and Videos
- Stories
React and React Native clients for GraphQL
- Apollo: Apollo Client is a community-driven GraphQL client for React, JavaScript, and native platforms
- Relay Modern: A JavaScript framework for building data-driven React applications
- urql: Universal React Query Library
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
Awesome tutorials for using GraphQL with React and React Native
- ReactJS
- 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 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
- (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
- (Video series) React Native and Prisma GraphQL eCommerce Project
- Miscellaneous
Boilerplates and examples for a headstart in development
- ReactJS
- ReactQL: Universal React+GraphQL starter kit
- UniversalRelayBoilerplate
- React Todo App using Apollo Client 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 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 Native
- WhatsApp Clone
- React Native Todo App using Apollo Client
- frontpage-react-native-app: Apollo "hello world" app, for React Native
- pokedex-react-native
- React, Apollo & GraphQL Starter Kits: Fullstack boilerplate project with a database and best practices for authentication, filtering, pagination and
- Server-side Rendering
- Offline apps
- 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
Get a GraphQL backend for your applications using these service providers
- Graphcool: Self-Hosted GraphQL BaaS
- Hasura: Instant GraphQL APIs on Postgres
- Scaphold: GraphQL Backend As A Service
- 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
Good and bad experiences