Best resources to learn React & GraphQL
Tags: graphql, webdev, beginners, react
Published: 2019-05-07 14:27:25

---
title: Best resources to learn React & GraphQL 
published: true
description: 
tags: graphql, webdev, beginners, react
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jdwao19c5ou5b9dputfw.png
canonical_url: https://blog.graphqleditor.com/best-resources-to-learn-react-graphql/
---

I've decided to create a list of top resources for two modern and trending technologies after checking results of [The stage of Javascript 2018 Survey](https://2018.stateofjs.com). The survey was completed by 20k users. React is, of course, the most popular among front end frameworks. 

![](https://thepracticaldev.s3.amazonaws.com/i/f4p5gvwq0ergnjjvv14f.png)

GraphQL is the top wanted to learn technology.

![](https://thepracticaldev.s3.amazonaws.com/i/55dds5uclyf4kshhp1d6.png)


# Clients

- [Apollo](https://www.apollographql.com/): Apollo Client is a community-driven GraphQL client for React, JavaScript, and native platforms

{% github apollographql/apollo-client %}
{% github apollographql/react-apollo %}

- [Relay Modern](https://facebook.github.io/relay/): A JavaScript framework for building data-driven React applications

{% github facebook/relay %}

- [AppSync](https://github.com/awslabs/aws-mobile-appsync-sdk-js): JavaScript GraphQL library for Offline, Sync, Sigv4. includes support for React Native

{% github awslabs/aws-mobile-appsync-sdk-js %}


# Tutorials

- React
  - [A complete React with GraphQL Tutorial](https://www.robinwieruch.de/react-with-graphql-tutorial/)
  - [A complete React with Apollo and GraphQL Tutorial](https://www.robinwieruch.de/react-graphql-apollo-tutorial/)
  - [React + Apollo Tutorial](https://www.howtographql.com/react-apollo/0-introduction/)
  - [React + Relay Tutorial](https://www.howtographql.com/react-relay/0-introduction/)

{% youtube XeALXh37WeU %}
{% youtube gF-peiFjG0o %}
{% youtube 7giZGFDGnkc %}
{% youtube kXH2dbnHYA0 %}

- React Native
  - [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)
  - [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)
  - [How to setup React Native + GraphQL + Relay Modern](https://codeburst.io/how-to-setup-a-react-native-graphql-relay-modern-a6a5f6c18353)
  - [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

{% youtube 33qP1QMmjv8 %}
{% youtube nyE6shIRzxM %}

# Developer Tools

  - [GraphQL Playground](https://github.com/graphcool/graphql-playground): Powerful GraphQL IDE built on top of GraphiQL

{% github graphcool/graphql-playground %}

  - [GraphiQL Online](https://graphiql-online.com): An online version of GraphiQL with a configurable endpoint and headers.
  - [GraphQL Editor](https://graphqleditor.com): a visual graphql editor that allows you to visualize graphql schema and create fake backend out of schema.

[![](https://thepracticaldev.s3.amazonaws.com/i/l712vn5w612l0qp2q6na.png)](https://app.graphqleditor.com/demo/blog-sample)

  - [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.

{% github ecerroni/apollo-cache-updater %}

  - [apollo-codegen](https://github.com/apollographql/apollo-codegen): Generate API code or type annotations based on a GraphQL schema and query documents

{% github apollographql/apollo-codegen %}

  - [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator): GraphQL code generator with flexible support for custom templates

{% github dotansimha/graphql-code-generator %}

  - [eslint-plugin-graphql](https://github.com/apollographql/eslint-plugin-graphql): Check your GraphQL query strings against a schema

{% github apollographql/eslint-plugin-graphql %}

  - [Apollo Client Developer Tools](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm): Chrome extension for Apollo Client developer tools
  - [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
  - [Relay Devtools Electron](https://www.npmjs.com/package/relay-devtools): Standalone Relay DevTools App for debugging Relay outside Chrome
  - [Relay Devtools Electron](https://www.npmjs.com/package/relay-devtools): Standalone Relay DevTools App for debugging Relay outside Chrome