DEV Community

Cover image for Best resources to learn React & GraphQL

Posted on • Updated on • Originally published at

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. The survey was completed by 20k users. React is, of course, the most popular among front end frameworks.

GraphQL is the top wanted to learn technology.


  • Apollo: Apollo Client is a community-driven GraphQL client for React, JavaScript, and native platforms

GitHub logo apollographql / apollo-client

๐Ÿš€ A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server

Apollo Client

Apollo Client

npm version Build Status Join the community on Spectrum

Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.


All Apollo Client documentation, including React integration articles and helpful recipes, can be found at:

The Apollo Client API reference can be found at:


GitHub logo apollographql / react-apollo

โ™ป๏ธ React integration for Apollo Client

React Apollo

React Apollo

npm version Build Status Join the community on Spectrum


Please note that 4.0.0 is the final version of all React Apollo packages. React Apollo functionality is now directly available from @apollo/client >= 3. While using the @apollo/react-X packages will still work, we recommend using the following imports from @apollo/client directly instead:

  • old: @apollo/react-components --> new: @apollo/client/react/components
  • old: @apollo/react-hoc --> new: @apollo/client/react/hoc
  • old: @apollo/react-ssr --> new: @apollo/client/react/ssr
  • old: @apollo/react-testing --> new: @apollo/client/testing
  • old: @apollo/react-hooks --> new: @apollo/client

Moving forward, all Apollo + React issues / pull requests should be opened in the apollo-client repo. Please refer to the Apollo Client migration guide for more details.

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.jsโ€ฆ

  • Relay Modern: A JavaScript framework for building data-driven React applications

GitHub logo facebook / relay

Relay is a JavaScript framework for building data-driven React applications.

Relay Build Status npm version

Relay is a JavaScript framework for building data-driven React applications.

  • Declarative: Never again communicate with your data store using an imperative API. Simply declare your data requirements using GraphQL and let Relay figure out how and when to fetch your data.
  • Colocation: Queries live next to the views that rely on them, so you can easily reason about your app. Relay aggregates queries into efficient network requests to fetch only what you need.
  • Mutations: Relay lets you mutate data on the client and server using GraphQL mutations, and offers automatic data consistency, optimistic updates, and error handling.

See how to use Relay in your own project.


The relay-examples repository contains an implementation of TodoMVC. To try it out:

git clone
cd relay-examples/todo
yarn build
yarn start

Then, just point your browser at http://localhost:3000.


We actively welcome pull requests, learn how to contributeโ€ฆ

  • AppSync: JavaScript GraphQL library for Offline, Sync, Sigv4. includes support for React Native

GitHub logo awslabs / aws-mobile-appsync-sdk-js

JavaScript library files for Offline, Sync, Sigv4. includes support for React Native

AWS AppSync

AWS AppSync JavaScript SDK

This SDK can be used with the Apollo JavaScript client found here. Please log questions for this client SDK in this repo and questions for the AppSync service in the official AWS AppSync forum.

lerna npm

package version
aws-appsync npm
aws-appsync-react npm



npm install --save aws-appsync


yarn add aws-appsync

AWS AppSync Compatibility

For version <= 2.x.x, the selection set for the subscription will be the mutation selection set. For version >= 3.x.x, the subscription selection set will be the intersection between mutation and subscription selection sets. More info here

React Native Compatibility

When using this library with React Native, you need to ensure you are using the correct version of the library based on your version of React Native. Take a look at the table below to determine what version to use.

aws-appsync version Required React Native Version
2.x.x >= 0.60
1.x.x <= 0.59



Developer Tools

GitHub logo prisma-labs / graphql-playground

๐ŸŽฎ GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)

SECURITY WARNING: both graphql-playground-html and all four (4) of it's middleware dependents until graphql-playground-html@1.6.22 were subject to an XSS Reflection attack vulnerability only to unsanitized user input strings to the functions therein. This was resolved in graphql-playground-html@^1.6.22. More Information

npm version prisma-labs

Future of this repository: see the announcement issue for details.

GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).


$ brew cask install graphql-playground


  • โœจ Context-aware autocompletion & error highlighting
  • ๐Ÿ“š Interactive, multi-column docs (keyboard support)
  • โšก๏ธ Supports real-time GraphQL Subscriptions
  • โš™ GraphQL Config support with multiple Projects & Endpoints
  • ๐Ÿšฅ Apollo Tracing support

Security Details

NOTE: only unsanitized user input to the functions in these packages is vulnerable to the recently reported XSS Reflection attack.


Impacted are any and all unsanitized user-defined input to -renderPlaygroundPage() -koaPlayground() -expressPlayground() -koaPlayground() -`lambdaPlayground()

If you used static values, such as graphql-playground-electron doesโ€ฆ

  • GraphiQL Online: An online version of GraphiQL with a configurable endpoint and headers.
  • GraphQL Editor: a visual graphql editor that allows you to visualize graphql schema and create fake backend out of schema.

  • 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 logo ecerroni / apollo-cache-updater

Helper for updating the apollo cache after a mutation


Generated with nod NPM version Build Status Coverage Status Dependencies minified + gzip

Zero-dependencies helper for updating the apollo cache after a mutation


Under heavy development


I wanted an updater that steals the magic of refetch queries while keeping the power of apollo local cache, but stripped of the boilerplate usually needed for each mutation update.

Updating the local cache becomes exponentially complicated when it needs to:

  • include multiple variables
  • include multiple queries
  • know which of our target queries has been already fired before our speficific mutation happend
  • cover scenarios** where apollo's in-place update may not be sufficient

** Add/remove to list, move from one list to another, update filtered list, etc.

This solution tries to decouple the view from the caching layer by configuring the mutation's result caching behavior through the Apollo's update variable.



$ npm install --save apollo-cache-updater

$ yarn add apollo-cache-updater


Example: Add an Article

The following block of code:

  • adds a newโ€ฆ
  • apollo-codegen: Generate API code or type annotations based on a GraphQL schema and query documents

GitHub logo apollographql / apollo-tooling

โœ๏ธ Tooling for development and production Apollo workflows

Apollo CLI

GitHub license npm Get on Slack

Apollo CLI brings together your GraphQL clients and servers with tools for validating your schema, linting your operations for compatibility with your server, and generating static types for improved client-side type safety.


Disclaimer: The following API documentation is only for the latest version released on NPM, and may not be accurate for previous or future versions.

$ npm install -g apollo
$ apollo COMMAND
running command...
$ apollo (-v|--version|version)
apollo/2.30.2 darwin-x64 node-v12.18.0
$ apollo --help [COMMAND]
  $ apollo COMMAND


apollo client:check

Check a client project against a pushed service


GitHub logo dotansimha / graphql-code-generator

A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.


npm version CircleCI Discord Chat code style: prettier renovate-app badge

GraphQL Codegen 1.0 is here!

GraphQL Code Generator is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can utilize GraphQL Code Generator to generate output from your GraphQL Schema and GraphQL Documents (query/mutation/subscription/fragment).

By analyzing the schema and documents and parsing it, GraphQL Code Generator can output code at a wide variety of formats, based on pre-defined templates or based on custom user-defined ones. Regardless of the language that you're using, GraphQL Code Generator got you covered.

GraphQL Code Generator lets you choose the output that you need, based on plugins, which are very flexible and customizable. You can also write your plugins to generate custom outputs that match your needs.

You can try this tool live on your browser and see some useful examples. Check out GraphQL Code Generator Live Examples.

We currently support andโ€ฆ

GitHub logo apollographql / eslint-plugin-graphql

๐Ÿšฆ Check your GraphQL query strings against a schema.


npm version Build Status Get on Slack

An ESLint plugin that checks tagged query strings inside JavaScript, or queries inside .graphql files, against a GraphQL schema.

npm install eslint-plugin-graphql

Screenshot from Atom

eslint-plugin-graphql has built-in settings for four GraphQL clients out of the box:

  1. Apollo client
  2. Relay
  3. Lokka
  4. FraQL

If you want to lint your GraphQL schema, rather than queries, check out cjoudrey/graphql-schema-linter.

Importing schema JSON

You'll need to import your introspection query result or the schema as a string in the Schema Language format. This can be done if you define your ESLint config in a JS file.

Retrieving a remote GraphQL schema

graphql-cli provides a get-schema command (in conjunction with a .graphqlconfig file) that makes retrieving remote schemas very simple.

apollo-codegen also provides an introspect-schema command that can get your remote schemas as well

Common options

All of the rules provided by this plugin have a few options in common. There are examples of how toโ€ฆ

Discussion (6)

lorendsr profile image
Loren ๐Ÿค“

I believe you'll find that The GraphQL Guide is the most in-depth React Apollo tutorial. At least it's the longest, with 150 pages in the React chapter ๐Ÿ˜ƒ

nilomiranda profile image
Danilo Miranda


That's exactly what I was looking for

dance2die profile image
Sung M. Kim • Edited on

Thanks for the awesome list ๐Ÿ‘

May I request you to add #react & #graphql tags, as well?

I totally missed out on this post ๐Ÿ˜‰

robmatyszewski profile image
robmatyszewski Author

done ;]

dance2die profile image
Sung M. Kim


jamessmith23 profile image

Great stuff! some more resources to learn React and Learn GraphQL!