Robert Matyszewski

Posted on May 7, 2019 • Updated on May 21, 2019 • Originally published at blog.graphqleditor.com

Best resources to learn React & GraphQL

#graphql #webdev #beginners #react

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

apollographql / apollo-client

🚀 A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.

Apollo Client

Announcement:
Join 1000+ engineers at GraphQL Summit for talks, workshops, and office hours, Oct 8-10 in NYC. Get your pass here ->

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.

☑️ Apollo Client User Survey
What do you like best about Apollo Client? What needs to be improved? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

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/

Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apollo's official learning platform:
https://odyssey.apollographql.com/

Maintainers

Name	Username
Ben Newman	@benjamn
Alessia Bellisario	@alessbell
Jeff Auriemma

…

View on GitHub

apollographql / react-apollo

♻️ React integration for Apollo Client

React Apollo

⚠️ 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…

View on GitHub

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

facebook / relay

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

Relay ·

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…

View on GitHub

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

awslabs / aws-mobile-appsync-sdk-js

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

Use AWS AppSync with JavaScript apps ·

AWS AppSync is a fully managed service that makes it easy to develop GraphQL APIs by handling the heavy lifting of securely connecting to data sources like AWS DynamoDB, Lambda, and more.

You can use any HTTP or GraphQL client to connect to a GraphQL API on AppSync.

For front-end web and mobile development, we recommend using the AWS Amplify library which is optimized to connect to the AppSync backend.

For DynamoDB data sources where conflict detection and resolution are enabled on AppSync, use the DataStore category in the Amplify library.
For non-DynamoDB data sources in scenarios where you have no offline requirements, use the API (GraphQL) category in the Amplify library.
If you want to use the Apollo V3 client, use the Apollo Links in this repository to help with authorization and subscriptions.

Looking for the AWS AppSync SDK for…

View on GitHub

Tutorials

React

React Native
- Code an App With GraphQL, React Native, and AWS AppSync: The API
- Code an App With GraphQL, React Native and AWS AppSync: The App
- How to setup React Native + GraphQL + Relay Modern
- Building Chatty: A WhatsApp clone with React Native and Apollo

Developer Tools

GraphQL Playground: Powerful GraphQL IDE built on top of GraphiQL

graphql / 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 CVE-2020-4038

Future of this repository: See this issue for details.

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

Installation

$ brew install --cask 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…

View on GitHub

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.

ecerroni / apollo-cache-updater

Helper for updating the apollo cache after a mutation

apollo-cache-updater

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…

View on GitHub

apollo-codegen: Generate API code or type annotations based on a GraphQL schema and query documents

apollographql / apollo-tooling

✏️ Apollo CLI for client tooling (Mostly replaced by Rover)

Apollo CLI

[2023-03-29] Note - all apollo service:* commands will reach end-of-life on April 28th, 2023. Refer to this blog post for more details.

[2022-07-07] Are you here for codegen? We highly recommend using graphql-code-generator instead. Codegen in this repo is no longer supported and will be removed completely in a future version. For additional migration details, please see this fantastic writeup by @dotansimha: #2053

[2022-01-21] Note - Upcoming Deprecation Plans: We (Apollo) are working towards fully deprecating this repository and its related projects. Most of the functionality in this repository has been replaced by newer projects and the rest will be soon. We'll share detailed migration documentation when everything here is ready to be officially deprecated, but just a heads up in case you're planning on adopting anything here for a new project (which you still can of course if the tooling here works for you - support for…

View on GitHub

graphql-code-generator: GraphQL code generator with flexible support for custom templates

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.

https://the-guild.dev/graphql/codegen

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 has 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 maintain these plugins (TypeScript, Flow…

View on GitHub

eslint-plugin-graphql: Check your GraphQL query strings against a schema

apollographql / eslint-plugin-graphql

🚦 Check your GraphQL query strings against a schema.

eslint-plugin-graphql

[2022-01-25] Note - Upcoming Deprecation Plans: We (Apollo) are working towards fully deprecating this repository. We suggest migrating to the community-supported graphql-eslint. We'll share detailed migration documentation when everything here is ready to be officially deprecated, but just a heads up in case you're planning on adopting anything here for a new project (which you still can of course if this project works for you - support for this project will be minimal however).

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

npm install eslint-plugin-graphql

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

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…

View on GitHub

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
Relay Devtools Electron: Standalone Relay DevTools App for debugging Relay outside Chrome

Top comments (6)

Loren 🤓 • May 8 '19

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