loading...
Cover image for Best resources to learn React & GraphQL

Best resources to learn React & GraphQL

robmatyszewski profile image robmatyszewski Originally published at blog.graphqleditor.com ・Updated on ・3 min read

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.

Clients

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

Documentation

All Apollo Client documentation, including React integration articles and helpful recipes, can be found at:
https://www.apollographql.com/docs/react/

The Apollo Client API reference can be found at:
https://www.apollographql.com/docs/react/api/apollo-client/

Maintainers





GitHub logo apollographql / react-apollo

♻️ React integration for Apollo Client

React Apollo

React Apollo

npm version Build Status Join the community on Spectrum


⚠️ THIS PROJECT HAS BEEN DEPRECATED ⚠️

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.

Example

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

git clone https://github.com/relayjs/relay-examples.git
cd relay-examples/todo
yarn
yarn build
yarn start

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

Contribute

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

Installation

npm

npm install --save aws-appsync

yarn

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

If…

Tutorials





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

Installation

$ brew cask install graphql-playground

Features

  • ✨ 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.

Impact

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

apollo-cache-updater

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

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

Status

Under heavy development

Why?

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.

Demo

Install

$ npm install --save apollo-cache-updater
OR 

$ yarn add apollo-cache-updater

Usage

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.

Usage

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]
USAGE
  $ apollo COMMAND
...

Commands

apollo client:check

Check a client project against a pushed service

USAGE
  $
…

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.

CodeGen

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

graphql-code-generator.com

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.

eslint-plugin-graphql

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

pic
Editor guide
Collapse
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 😃

graphql.guide

Collapse
nilomiranda profile image
Danilo Miranda

Daaaaamn...

That's exactly what I was looking for

Collapse
dance2die profile image
Sung M. Kim

Thanks for the awesome list 👍

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

I totally missed out on this post 😉

Collapse
robmatyszewski profile image
Collapse
dance2die profile image
Sung M. Kim

😃🤜

Collapse
jamessmith23 profile image
JamesSmith23

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