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.
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 |
apollographql / react-apollo
โป๏ธ React integration for Apollo Client
React Apollo
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
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โฆ
- 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
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โฆ
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 untilgraphql-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 ingraphql-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โฆ
- 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โฆ
- 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โฆ
- 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โฆ
- 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โฆ
- 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)
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
Daaaaamn...
That's exactly what I was looking for
Thanks for the awesome list ๐
May I request you to add #react & #graphql tags, as well?
I totally missed out on this post ๐
done ;]
๐๐ค
Great stuff! some more resources to learn React and Learn GraphQL!