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
- AppSync: JavaScript GraphQL library for Offline, Sync, Sigv4. includes support for React Native
- 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
- 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.
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
- 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
Boilerplates and examples for a headstart in development
- ReactJS
- ReactQL: Universal React+GraphQL starter kit
- 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
- 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
- JWT
- Performance Tracing
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.
- 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.
Good and bad experiences