Using GraphQL With React

Articles & Tutorials

Making GraphQL requests easy with React Query and TypeScript (blog.logrocket.com)
Apr 19, 2021
Using a GraphQL API comes with distinct advantages. With GraphQL, we can request the exact data we need without ever under- or over-fetching. We can also get multiple resources in a single request.
  • Iva Kop
Getting Started With Apollo Client in Next.js (apollographql.com)
Mar 09, 2021
In this post, we’ll briefly cover each way to fetch and render data with Next.js, along with the important considerations for each approach. We’ll wrap up with a demonstration of how to configure Apollo Client for each one.
  • Kurt Kemple
GraphQL vs React Server Components — Do We Need Both? (blog.bitsrc.io)
Jan 11, 2021
This new type of component promises to revolutionize the way we interact with the back-end.
  • Fernando Doglio
Building a Next.js App with Apollo Client & Slash GraphQL (apollographql.com)
Nov 11, 2020
In this blog post, we will build a simple NextJS app from scratch, using Apollo Client to consume the GraphQL API of Slash GraphQL.
  • Apoorv Vardhan
How To Build A GraphQL Server Using Next.js API Routes (smashingmagazine.com)
Oct 29, 2020
This guide will teach you the basics of Next.js API Routes. We will start by explaining what they are and why API Routes are useful compared to REST or GraphQL APIs. Then, we will guide you through a step by step tutorial on how to build your very first GraphQL server with Next.js and the Github API.
  • Ibrahima Ndaw
How To Manage File Uploads In React With Google Storage And GraphQL (smashingmagazine.com)
Oct 08, 2020
From a user’s profile picture to other media assets, data collection and storage to cloud services through file uploads have become an essential feature for most modern applications. In this article, you will learn how file uploads can be implemented in a GraphQL application.
  • Nwani Victory
Advanced GraphQL Usage In Gatsby Websites (smashingmagazine.com)
Sep 16, 2020
In this article, Aleem Isiaka explains what GraphQL query constructs are, and how they can be used to interact with the data access layer of a Gatsby website. Let’s take a look at some of the advanced use cases of GraphQL within a Gatsby website by using matching data from different sources.
  • Aleem Isiaka
Understanding Client-Side GraphQl With Apollo-Client In React Apps (smashingmagazine.com)
Jul 29, 2020
We’ll be taking a closer look at a few basics of GraphQL and Apollo Client, as well as how to work with both of them. By the end, we’ll have built a pet shop app that uses Apollo Client. Then, you can go on to build your next project.
  • Blessing Krofegha
The React + Apollo Client 2020 Cheatsheet (freecodecamp.org)
Jul 04, 2020
I've put together a comprehensive cheatsheet that goes through all of the core concepts in the Apollo library, showing you how to use it with React from front to back.
  • Reed Barger
The React + GraphQL 2020 Crash Course (freecodecamp.org)
Jun 30, 2020
Have you heard a lot about using React with GraphQL but don't know how to combine them to build amazing apps? In this crash course, you'll learn how to do just that by building a complete social blogging app.
  • Reed Barger
How GraphQL boosts performance in Gatsby (blog.logrocket.com)
Jun 04, 2020
We'll take a look at how Gatsby, which is a PWA generator, uses GraphQL to pull in data at build time and also its implications on performance.
  • Obinna Ekwuno
A Better Way to use GraphQL Fragments in React (levelup.gitconnected.com)
May 12, 2020
Defining fragments inside the components that render data brings many benefits.
  • Alec Brunelle
Building a Trello clone with React Hooks and GraphQL (blog.logrocket.com)
May 11, 2020
This article explains how to build a Trello-like application using React Hooks and a GraphqQL server. Before jumping into the application, let me give you an explanation for why we need to build this.
  • Ganesh Mani
How to Create a Full-Stack Yelp Clone with React & GraphQL (freecodecamp.org)
May 05, 2020
It's a mini Yelp clone where instead of reviewing restaurants, users review planets from the classic sci-fi series, Dune.
  • Sezgi Ulucam
Static Sites with Next.js 9.3 and Prisma (leerob.io)
Apr 08, 2020
Static sites are all the rage – and for a good reason. The JAMstack (i.e., JavaScript, APIs, and Markup) has emerged as an attractive alternative to traditional web apps.
  • Lee Robinson
Comparing hooks libraries for GraphQL (blog.logrocket.com)
Mar 24, 2020
There are two major React Hooks libraries: graphql-hooks and apollo/react-hooks. To help you determine which library is best for your next GraphQL project, let’s compare them, examine their features, and weigh the pros and cons.
  • Ganesh Mani
Building a Product Hunt clone app using Hasura and Next.js (blog.logrocket.com)
Feb 20, 2020
This tutorial will demonstrate how to create a clone of product curation app Product Hunt using Hasura and Next.js. We’ll show you how to conduct authentication and authorization using Hasura and how to leverage GraphQL to fetch and write data from a Next.js frontend application.
  • Nirmalya Ghosh
GraphQL File Uploads with React Hooks, TypeScript & Amazon S3 (blog.apollographql.com)
Feb 14, 2020
Learn how to use GraphQL to upload files with multipart upload requests.
  • Khalil Stemmler
Building a GraphQL server in Next.js (blog.logrocket.com)
Feb 10, 2020
In this article, we will learn how to use API routes to set up a GraphQL API within a Next.js app. It will start with the basic setup, and then cover some more in-depth concepts.
How to create a React Native app with PostgreSQL and GraphQL: Part 2 (blog.logrocket.com)
Jan 07, 2020
In the previous article, we created a GraphQL server with NodeJS and Express. We will now look to consume the endpoints in the server we created using a React Native mobile app.
  • Austin Roy Omondi
GraphQL + React for noobs (blog.logrocket.com)
Dec 18, 2019
GraphQL is becoming the new standard for data-driven applications. It is an open-source data query and manipulation language for APIs, and a revolutionary way of thinking about communication between our client and the server.
  • Ebenezer Don
Build a Meal Ticketing App with GraphQL and Apollo React Hooks (scotch.io)
Nov 25, 2019
A meal ticket tracker allows you to issue digital meal tickets to attendees and not rely on paper tickets.
Writing end-to-end tests for GraphQL servers using Jest (blog.logrocket.com)
Nov 24, 2019
Writing end-to-end tests for applications helps to ensure applications behave as expected. It also comes in handy when we add new features to existing applications because it ensures the newly introduced features integrate well with our already existing features.
  • Gbolahan Olagunju
Handling GraphQL errors like a champ with unions and interfaces (blog.logrocket.com)
Nov 19, 2019
Today, I know that GraphQL gives us the power to handle errors in a better and more explicit way.
  • Laurin Quast
How to Build a Web App with GraphQL and React (sitepoint.com)
Oct 31, 2019
In this tutorial, we’ll learn to build a web application with React and GraphQL. We’ll consume an API available from graphql-pokemon and serve it from this link, which allows you to get information about Pokémon.
  • Ahmed Bouchefra
Getting Started with GraphQL and React Native (sitepoint.com)
Oct 09, 2019
Facebook describes GraphQL as a “query language for APIs and a runtime for fulfilling those queries with your existing data”.
  • Jamie Maison
How to Build a Note-Taking App with GraphQL and React — Part 2 of 2 (blog.bitsrc.io)
Oct 08, 2019
Learn how to build a React UI for a GraphQL service.
  • Yomi Eluwande
How to Build a Note-Taking App with GraphQL and React — Part 1 of 2 (blog.bitsrc.io)
Oct 02, 2019
Learn and practice GraphQL by building a React note-taking app
  • Yomi Eluwande
How to create a React Native app with PostgreSQL and GraphQL: Part 1 (blog.logrocket.com)
Sep 03, 2019
For the first part, we’ll be building a GraphQL server with a PostgreSQL database that will serve as the backend of our application. In the second part (blog post to come later) we will build an application with React Native that will consume data from our server.
  • Austin Roy Omondi
Make CRUD simple with Node, GraphQL, and React (blog.logrocket.com)
Aug 28, 2019
In this article, we’re going to implement simple end-to-end CRUD operations with GraphQL.
  • Avanthika Meenakshi
Apollo Client, now with React Hooks (blog.apollographql.com)
Aug 06, 2019
Today we’re thrilled to announce the addition of React Hooks to Apollo Client!
  • Hugh Willson
Mocking and Testing GraphQL in React (telerik.com)
Jul 31, 2019
Testing GraphQL doesn't have to be difficult. This article will explore static and dynamic mocks to make testing GraphQL a breeze.
Getting started with GraphQL: what client to use? (javascriptplayground.com)
Jul 29, 2019
Today we're looking into working with a GraphQL API and discussing if you need to reach for a 3rd party library or not.
Server-Side Rendered Real-time Web App with Next.js, AWS Amplify & GraphQL (dev.to)
Jul 25, 2019
In this blog post we will go through building a server-rendered realtime collaborative todo list app with Next.js and AWS Amplify.
  • Rakan Nimer
Using GraphQL Playground with Gatsby (css-tricks.com)
Jul 18, 2019
In this article, we are concerned with the build process, which is powered by GraphQL. This is the part where your data is managed.
  • Adebiyi Adedotun
Build a GraphQL + React app with TypeScript (blog.logrocket.com)
Jun 09, 2019
This article walks you through building a client-side application with React and Apollo using the public SpaceX GraphQL API to display information about launches. We will automatically generate TypeScript types for our queries and execute these queries using React Hooks.
  • Trey Huffine
Explore GraphQL with Apollo & React: Build a Superhero Database (sitepoint.com)
May 08, 2019
Curious about all the buzz surrounding GraphQL, but not quite sure why you should be excited? You’re in the right place! We’ll shed some light on what GraphQL is and give you an opportunity for some hands-on experience.
  • Joe Hewitson
A Different Approach to GraphQL Caching (adamrackis.dev)
Mar 13, 2019
GraphQL is an incredibly exciting innovation for web development. You specify your data, queries, and mutations in a statically typed way, and get an endpoint users can consume, requesting whatever slice of data they happen to need at any given moment.
  • Adam Rackis
Announcing Apollo Client 2.5 (blog.apollographql.com)
Feb 26, 2019
One year ago, we had a vision for the future of state management. We wanted to provide developers with one source of truth for all of their app’s data and one unified interface to access it. Our dream is finally a reality with the release of Apollo Client 2.5, now with local state management!
  • Hugh Willson
Should I Use Apollo for GraphQL? (blog.bitsrc.io)
Feb 19, 2019
GraphQL is just a query language. And in order to use it easily, we need to use a platform that will do all the heavy lifting for us. One such platform is provided by Apollo.
  • Rajat Saxena
Graceful GraphQL with React Hooks and MobX (levelup.gitconnected.com)
Feb 18, 2019
GraphQL meets React Hooks and forms a powerful friendship. They should connect with MobX too!
  • Daniel K.
Under-the-hood of Apollo (itnext.io)
Feb 10, 2019
This post comes from a recent talk I did on the internals of Apollo Client. I was frustrated that I did not understand what was actually going on when I was using it so I took some time to delve into the code.
  • Craig Taub
Love and affection about reactjs, Apollo, and GraphQL part 1 (dev.to)
Feb 09, 2019
This is a series of posts how I felt while working on my first project with Apollo, GraphQL, and reactjs. Also, you will learn how to set it up!
  • Michael Lazarski
React Suspense with GraphQL (medium.com)
Feb 08, 2019
Warning, the React docs say that Suspense does not yet support data loading, so in the future there may be breaking changes & better options available.
Reading Data From A JSON File With Gatsby + GraphQL (dev.to)
Feb 08, 2019
Use gatsby-transformer-json to read data from a local JSON file and dynamically generate list items in a React component.
  • Emma Wedekind
Apollo and Relay Side by Side (blog.bitsrc.io)
Jan 29, 2019
Decide which GraphQL library is right for you
  • Scott Domes
GraphQL in React with Apollo (telerik.com)
Jan 02, 2019
GraphQL APIs are the future, and Apollo is the best way to integrate it into your React app right now.
  • Leigh Halliday
A new approach to mocking GraphQL data (medium.freecodecamp.org)
Dec 11, 2018
How we power React component tests and examples at Stripe
  • Sashko Stubailo
A GraphQL Tutorial for Beginners (robinwieruch.de)
Nov 01, 2018
This GraphQL tutorial for beginners takes you on a journey to learn GraphQL. You will explore GraphQL with GitHub's GraphQL API and later learn how to build fullstack web applications with it ...
A Apollo Client Tutorial for Beginners (robinwieruch.de)
Nov 01, 2018
This tutorial shows you how to use Apollo Client for GraphQL without any other third-party library.
Writing Tests for Apollo Client in React (robinwieruch.de)
Oct 19, 2018
The tutorial builds up on a mocked GraphQL API enabling you to write tests for your Apollo Client queries and mutations in React. It answers the question: How to test Apollo Client in React ...
React + Apollo: How to Redirect after Refetching a Query (medium.freecodecamp.org)
Aug 25, 2018
GraphQL is hot, and for a good reason. In short, it is a query language that allows you to ask for exactly what you need from your API. This cuts any unnecessary data transfer that may occur with different methodologies.
  • Jun Hyuk Kim
GraphQL Server Tutorial with Apollo Server and Express (robinwieruch.de)
Aug 22, 2018
Learn how to build a GraphQL server with Apollo Server and Express with authentication, authorization, pagination, subscription, database access, tests.
Why Apollo: Advantages, Disadvantages & Alternatives (robinwieruch.de)
Jul 04, 2018
Overview about the advantages and disadvantages of using Apollo and its ecosystem for JavaScript applications. It mentions also Apollo alternatives such as Urql and Relay for React applications.
Why GraphQL: Advantages, Disadvantages & Alternatives (robinwieruch.de)
Jul 03, 2018
An overview about the advantages and disadvantages of using GraphQL instead of REST for JavaScript applications. It answers the question: 'What is GraphQL' and 'Why you should use GraphQL' for your next JavaScript application.
How to use Redux with Apollo Client and GraphQL in React (robinwieruch.de)
Jun 26, 2018
When having a GraphQL server, Apollo Client can be a valid option for your remote data. How fits Redux into the equation? This tutorial shows you an example on how Redux and Apollo Client can be used together in a React application. Whereas Redux is used for local data, Apollo Client is used for remote data.
How to build a GraphQL client library for React (robinwieruch.de)
Jun 13, 2018
A tutorial on how to build a GraphQL client library for React applications. It has three parts: the GraphQL client, connecting the GraphQL client to React, and offering Query and Mutation components for GraphQL operations.
Getting Started with GitHub's GraphQL API (robinwieruch.de)
Jun 09, 2018
I encourage GraphQL newcomers to start with the client-side by consuming a third-party GraphQL API before diving into the server-side of using GraphQL.
A minimal Apollo Client in React Example (robinwieruch.de)
Jun 05, 2018
The tutorial guides you through building a minimal Apollo Client in React example application where Apollo Client is used for remote data and React's local state for local data.
Mocking a GraphQL Server for Apollo Client (robinwieruch.de)
May 28, 2018
The tutorial shows you how to mock your GraphQL server for your GraphQL client for testing or other purposes. Either you can reconstruct a GraphQL client-side schema or introspect the GraphQL server schema. Both ways use client-side resolvers to mock the data.
A apollo-link-state Tutorial for Local State Management (robinwieruch.de)
May 04, 2018
I want to show how to use apollo-link-state instead of introducing Redux or MobX in a React example application.
A complete React with Apollo and GraphQL Tutorial (robinwieruch.de)
May 01, 2018
In this tutorial, you will learn how to combine React with GraphQL in your application by using Apollo.
Getting Started With React And GraphQL (codingthesmartway.com)
Apr 22, 2018
In this tutorial you’ll learn how to use GraphQL in a React web application. To make use of GraphQL inside your React project we’ll be using the React Apollo library.
  • Sebastian Eschweiler
A complete React with GraphQL Tutorial (robinwieruch.de)
Apr 09, 2018
In this tutorial, you will learn how to combine React with GraphQL in your application.
How GraphQL Replaces Redux (hackernoon.com)
Mar 09, 2018
“What?!”, you say. “GraphQL is a server side query language. Redux is a client-side state management library. How could one replace the other?” Good question.
  • Mark Johnson
The future of state management (blog.apollographql.com)
Dec 21, 2017
Managing your local data in Apollo Client with apollo-link-state.
  • Peggy Rayzis
How does GraphQL get the data from the database? (blog.jakoblind.no)
Nov 13, 2017
In this article, I will go through how the server process a GraphQL-query from the client, and how it decides what data to send back to the client.
What’s Next.js for Apollo (blog.apollographql.com)
Mar 23, 2017
Universally render your application with Apollo and Next
  • Adam Soffer

Video Guides & Talks

Build Fullstack Realtime Apps with React and Hasura GraphQL (youtube.com)
Jan 13, 2021
In this stream, we will go over building a react app integrating GraphQL APIs using Hasura backend and Apollo Client.
  • Praveen Durairaju
Create a site like Pastebin with GraphQL + Next.js (youtube.com)
Dec 23, 2020
In this livestream we'll create a website that allows us to paste code snippets, and save them with friends! We'll use GraphQL mutations with GraphCMS inside a Next.js API route to store our data.
  • Jamie Barton
Realtime Chat App (youtube.com)
Aug 17, 2020
Let's build a realtime chat app with React, Apollo, GraphQL Subscriptions, Websockets and Module Federation.
  • Jack Herrington
Apollo Client v3 Fullstack Next.js Setup with SSR + Nexus Schema (youtube.com)
Aug 17, 2020
In this video we recreate the Next.js example setting up Apollo Client v3, Apollo Server, Nexus Schema, with support for SSR.
Build your own GraphQL Resume with Next.js, Apollo Client, and Prism Code Highlighter. Part 2 / 2 (youtube.com)
Aug 15, 2020
In part two we will build out the frontend of our GraphQL Resume. First we set up the Apollo Client, then fetch and display the data that comes back from our GraphQL API. Lastly we add Prism Code Highlighter to show display the GraphQL query which retrieved the data we are displaying.
Build your own GraphQL Resume with Next.js, Apollo Server, and Nexus Schema. Part 1 / 2 (youtube.com)
Aug 11, 2020
In this video we will use a code-first approach to building a GraphQL API. This means that the code we write will generate the GraphQL schema as an artifact rather than something we have to maintain ourselves.
Building a Backend for React with Next.js, Prisma 2, and Postgres (youtube.com)
Jun 24, 2020
In this video we will take an existing React app using Google Maps, and using Next.js (API routes), Prisma 2, and Postgres, we will learn how to read data from, and save data to our database.
Posting Data to Server from React - Query Updates from Mutations (youtube.com)
Jun 18, 2020
In React you often need to persist data to the server. This video shows how to use react-query mutation functionality to post data to the server, and update the UI with fresh content. We cover three approaches to UI updates, going from easiest but worst performing, to most complicated but best performing.
GraphCMS x Next.js | Working with getStaticProps, getStaticPaths and GraphQL (youtube.com)
Apr 10, 2020
In this video we will configure Next.js to programmatically create our product pages by querying data from GraphCMS at build time.
  • Jamie Barton
GraphCMS x Gatsby | Working with GraphQL, Gatsby Create Pages API (youtube.com)
Apr 09, 2020
In this video we programmatically create Product pages for products inside our GraphCMS project. We use Gatsby Create Pages API to do this, and fetch our GraphCMS data using the `gatsby-source-graphql` plugin.
  • Jamie Barton
gqless: GraphQL Without GQL in React (youtube.com)
Apr 06, 2020
In this video I experiment with a new and very alpha library called gqless which allows you to simply access your data, and it will perform the necessary GraphQL query to actually fetch it.
GraphQL Pagination with Cursors in Apollo React (youtube.com)
Feb 13, 2020
Apollo provides a function made for fetching additional paginated results, but it isn't directly obvious how it works! In this video we will walk through Cursor based GraphQL Pagination in Apollo React.
Building a GraphQL server in Next.js (youtube.com)
Feb 10, 2020
In this video, we will learn how to use API routes to set up a GraphQL API within a Next.js app.
Even More GraphQL + React Hooks Refactoring! (youtube.com)
Jan 30, 2020
Another video with my refactoring my AdvancedReact.com course
React Apollo State Management Best Practices (youtube.com)
Jan 23, 2020
I discuss how I like to handle state management when I'm using Apollo and how to use it along side Redux.
Refactoring React + Apollo Form to use Hooks (youtube.com)
Dec 17, 2019
Quickie on me refactoring React Apollo from Render.
GraphQL Typescript Authentication Boilerplate (youtube.com)
Nov 25, 2019
I walkthrough and explain the GraphQL Typescript boilerplate I created that includes authentication via sessions.
Build a Gatsby Site With Nest.js (youtube.com)
Nov 05, 2019
What is Nest.js, and how does it make building APIs easier? In this episode, Ryan Chenkie teaches us how to create a GraphQL API using Nest.js, then builds a Gatsby site using the data.
  • Jason Lengstorf
  • Ryan Chenkie
JWT Authentication Node.js Tutorial with GraphQL and React (youtube.com)
Sep 19, 2019
Learn how to add JWT authentication to your project with this fullstack tutorial using Node.js, Typescript, GraphQL, React, and PostgreSQL.
Advanced GraphQL Techniques in Gatsby (youtube.com)
Sep 12, 2019
Can a GraphQL node get data from two different places? Can we use GraphQL to normalize data form different sources? Mikhail Novikov will teach us advanced GraphQL patterns with Gatsby so you can create extremely powerful apps and websites.
  • Jason Lengstorf
  • Mikhail Novikov
Hooking Up a Conference in Real-time with GraphQL (youtube.com)
Jul 31, 2019
In this talk, I'll show how you can rapidly prototype, build, & deploy your app using GraphQL, React Native, & AWS AppSync so you can spend your time worrying about more important things in life. In addition to what you'd expect from a conference app, we'll be adding live chat so attendees discuss talks & speakers can field questions & interact with them in real-time.
Gatsby + WordPress with WPGraphQL (youtube.com)
Jul 25, 2019
Did you know WordPress & Gatsby are great together? In this stream, Jason Bahl teaches us how to use WordPress with Advanced Custom Fields and WPGraphQL to create an powerful, flexible admin dashboard, then query and display that data in a Gatsby site.
  • Jason Lengstorf
  • Jason Bahl
Making It All Fit Together with React and GraphQL (youtube.com)
Jul 12, 2019
Many tools and processes go into modern front-end development: from component development to design and data fetching to testing and more. How does Stripe make these all work together? Join Paul Asjes from Stripe’s engineering team for a talk on how to make all these components and processes work in a way that makes the modern front-end greater than the sum of its many parts.
  • Paul Asjes
Gatsby and GraphQL: Today and the Future (youtube.com)
Jul 11, 2019
Gatsby uses GraphQL in a pretty unique way — type inference, automatic filter and connection generation.
Build forms with GraphQL (youtube.com)
May 30, 2019
We will explore an alternative way to manage forms using types and GraphQL.
  • Charly Poly
Combining GraphQL + mobx-state-tree (youtube.com)
May 28, 2019
GraphQL and mobx-state-tree are match made in heaven; both are a model first oriented technologies. GraphQL optimizes data fetches and mutations. Adding mobx-state-tree to this mix, makes this model even richer: It allows client only state, actions and derived data to be mixed into our data models.
Serverless GraphQL with Netlify Dev (youtube.com)
May 21, 2019
In this talk we explore how Serverless and GraphQL work together, explore ways to stitch individual function schemas, and get hard numbers to fight performance concerns.
GraphQL + Suspense (youtube.com)
May 21, 2019
In this talk, Jared Palmer, Engineering Lead at The Palmer Group goes deep on the past, present, and future of data fetching in React apps.
The GraphQL developer experience (youtube.com)
Apr 24, 2019
Data fetching makes up a large part of our React apps, yet it's also some of the most complex code we write. GraphQL can help us reduce this complexity, especially when it's combined with intelligent tooling. In this talk, we'll explore how to achieve a friction-free state management experience with GraphQL and Apollo right inside your editor.
  • Peggy Rayzis
React and GraphQL - Building Blocks (youtube.com)
Dec 20, 2018
Building GraphQL apps in React is no easy feat but is hugely simplified by GraphQL clients that intelligently take schemas and types into account. In this talk, we'll explore what a newer more flexible version of the urql library will look like, and how it encourages experimentation so you can build your own, custom GraphQL client more easily.
  • Phil Pluckthun
Real-time Offline-ready Mobile Apps w/ React Native & AWS (youtube.com)
Dec 19, 2018
In this talk, I’ll demonstrate and discuss the more interesting and powerful functionality that AppSync offers and do so in a way that developers will walk away with a confident understanding of how AppSync works and can be extended to help them in their day to day. We'll also create & connect to a real AppSync API in a demo to demonstrate what we discussed in the talk in a live coding exercise.
Using Apollo Link State (youtube.com)
Dec 09, 2018
In this video we learn how to use the apollo-link-state library to Mutate and Query our local state. Link State is an alternative to using React's Component level state, MobX, or Redux... access and mutate your data in the same way you communicate with external GraphQL APIs.
React Hooks with Apollo GraphQL (youtube.com)
Dec 08, 2018
We'll transform some React code using the Query component from Apollo GraphQL to use hooks! The code ends up being WAY cleaner and easier to reason about.
GraphQL + Audi = Yes! (youtube.com)
Dec 05, 2018
Audi's Director of IT Digital Tech Solutions and Strategy, Jeff Titus, shares his GraphQL journey and lessons learned along the way.
  • Jeff Titus
Beyond Static With Gatsby & Apollo (youtube.com)
Dec 05, 2018
In this talk, learn how Gatsby & Apollo help you build apps that combine the performance and workflow benefits of static sites with the flexibility and power of server-driven sites.
  • Jason Lengstorf
Teaching GraphQL (youtube.com)
Dec 05, 2018
Whether you’re ramping up a new hire, mentoring a co-worker, writing documentation, or giving a technical talk, you’re constantly expected to share knowledge as requirements and technologies rapidly change.
GraphQL Schema Design @ Scale (youtube.com)
Dec 05, 2018
GraphQL's type system is what makes it so powerful. However, as our schemas grow, they sometimes become hard to evolve, hard to reason about, and hard to use for our integrators.
  • Marc-André Giroux
Netflix Studio Insider: µServices to GraphQL (youtube.com)
Dec 05, 2018
Dane Avilla, Senior Software Engineer at Netflix, shares the lessons-learned at Netflix as we established a mechanism for teams to 'opt in' and migrate from various microservice platforms (REST, gRPC, etc.) to GraphQL while preserving 'Freedom & Responsibility'.
Shipping 'Belonging' with GraphQL & Apollo at Airbnb (youtube.com)
Dec 05, 2018
Airbnb's mission is to create a world where anyone can Belong Anywhere. But we can only deliver on that vision by executing! GraphQL and Apollo Platform sit at the center of a portfolio of tools engineers at Airbnb are using to ship faster.
Moving from Redux to GraphQL (youtube.com)
Dec 05, 2018
Shruti Kapoor, Software Engineer at PayPal, and Perumal Palani, Member of Technical Staff - 2 at PayPal, walk through the decisions of moving from Redux to GraphQL.
Let's manage our local state with GraphQL (youtube.com)
Nov 13, 2018
Apollo has given us freedom and happiness when it comes to managing our data coming from the server but we still had to write code and sometimes a lot of it to manage our local state? Well, what if we managed it with queries too? Sounds too awesome right? Let's learn how to do this with apollo-link-state.
GraphQL with your REST endpoints with RestLink (youtube.com)
Nov 05, 2018
If you need to talk with a RESTful endpoint alongside your GraphQL API, adding RestLink allows you to seamlessly perform GraphQL queries to interact with those REST endpoints.
GraphQL with ApolloBoost Client (youtube.com)
Nov 02, 2018
Don't know where to begin with GraphQL in React? Begin by setting up a client with ApolloBoost and make a Query! In this video we pull my starred repositories from the GitHub GraphQL API.
AWS AppSync Tutorial with React (youtube.com)
Oct 17, 2018
Learn how to use AWS AppSync with React and Typescript. This tutorial will start from scratch and cover how to create a graphql api and call a query and mutation.
GQL all the Things! (youtube.com)
Sep 14, 2018
Let's take a look at look at what we can do with React Apollo today, how we can use it to even manage our local state and see what the future holds for us in the new releases of React Apollo.
GraphQL Workshop - React Kyiv (youtube.com)
Jul 08, 2018
Learn GraphQL by doing! We will have a workshop where we will create a bsic graphql backend with prisma and then connect to the frontend with react Apollo.
State Management in React Apps with Apollo Client (youtube.com)
May 25, 2018
Apollo has given us freedom and happiness when it comes to managing our data coming from the server but we still had to write code and sometimes a lot of it to manage our local state? Well, what if we managed it with queries too? Sounds too awesome right? Let's learn how to do this with apollo-link-state.
How to use GraphQL with React (youtube.com)
May 13, 2018
We'll take a look at how to use GraphQL with React using the Apollo GraphQL library and GitHub's new GraphQL API. We'll look at setting up our client, provider, and finally writing and executing our GraphQL query.
React State Management In a GraphQL Era - Kitze (youtube.com)
Apr 25, 2018
Now that GraphQL takes care of managing data in our apps, is an external state-management library even needed? Let's explore all the possibilities and compare the combinations of React, Apollo, Redux, MobX, and Next.js.
  • Kitze
Getting Started With React And GraphQL (youtube.com)
Apr 22, 2018
In this tutorial you’ll learn how to use GraphQL in a React web application. To make use of GraphQL inside your React project we’ll be using the React Apollo library.
  • Sebastian Eschweiler
Intro to GraphQL (youtube.com)
Mar 31, 2018
GraphQL is a declarative query language that is revolutionizing how we think about the data in our applications — it helps make accessing APIs from both the client and the server an absolute breeze. Come learn the basics of GraphQL and how you can use it today!
  • Jon Wong
A Postgres-backed GraphQL BAAS (youtube.com)
Mar 31, 2018
A review of how we created a GraphQL backend backed by Postgres. The key challenges faced by real-world apps and our solution approach, specifically around expressive query arguments, access control, schema iteration, sharing auth between multiple API backends. We will also review some quick tips to make the most out of Postgres and reveal some early performance benchmarks. We will end with a demo how you can create complex data models and make intuitive graphql queries from your app without requiring in-depth knowledge of graphql schemas.
  • Tanmai Gopal
State Management in a GraphQL Era (youtube.com)
Mar 20, 2018
We're going to start with exploring the evolution of making a SPA. Then we're going to dive into the problem of how fetching, caching, and reading data really complicates state-management and see what approaches we took with different libraries and frameworks like jQuery, Angular, and React.
  • Kitze
What Is GraphQL? (youtube.com)
Jan 10, 2018
In this video, I answer What Is GraphQL? and then discuss more about how to use GraphQL in a real world context and why you might want to.
Lessons learned from implementing a GraphQL API (youtube.com)
Mar 29, 2017
We got introduced to GraphQL over a year ago and were impressed by its promise. Since then we have discovered patterns on how to best structure and implement a GraphQL API. In this talk we will share some of these patterns and provide examples on how to implement them.
  • Florentijn Hogerwerf
  • Dirk-Jan Rutten
GraphQL at Shopify (youtube.com)
Nov 04, 2016
In this talk, we'll explore how Shopify designed and built its GraphQL API to make it easy for any team to extend and use our GraphQL schema.
  • Apollo GraphQL

Books & Guides

Principled GraphQL (principledgraphql.com)
Feb 12, 2019
Best practices for implementing and scaling a data graph.
  • Geoff Schmidt
  • Matt DeBergalis
React Cookbook (packtpub.com)Get it on Amazon
Aug 30, 2018
Over 66 hands-on recipes that cover UI development, animations, component architecture, routing, databases, testing, and debugging with React
  • Carlos Santana Roldan

Courses & Video Series

Frontend Serverless with React and GraphQL (courses.codemochi.com)
Mar 31, 2020
Learn how to build end-to-end strongly-typed React apps that enable you to focus less on writing fragile, single purpose data fetching code and more on functionality that your users care about.
  • Stephen Jensen
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL (newline.co)
Nov 13, 2019
Learn advanced React, Node, TypeScript, and GraphQL by building a production-ready application in this 8-week, online course.
  • Hassan Djirdeh
  • Jing Chen
GraphQL: The Big Picture (app.pluralsight.com)
Aug 08, 2019
In this course, you will learn about GraphQL, it's core concepts, and why you should choose GraphQL to build your APIs. Explore the growing GraphQL ecosystem and tools that provide you a superior developer experience.
  • Adhithi Ravichandran
Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL) (udemy.com)
Jul 01, 2019
Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.
  • Andrei Neagoie
  • Yihua Zhang
React Native for Designers (designcode.io)
Feb 13, 2019
Learn to build an iOS and Android app from scratch. A 6-hour course teaching you custom animations, Styled Components, Redux, API data and adaptive layouts in React Native.
  • Meng To
Building Serverless Web Applications with React & AWS Amplify (egghead.io)
Feb 05, 2019
This course walks you through setup and implementation to get your cloud-based application up and running. You’ll finish the course ready to quickly and easily deploy your serverless React application, so users can start using and enjoying it right away.
Typescript, Next.js, And GraphQL Series (youtube.com)
Jan 27, 2019
Learn how to setup a Next.js project with typescript.
Introduction to GraphQL (frontendmasters.com)
Jan 22, 2019
Learn how GraphQL empowers more flexibility into your APIs – and learn to build GraphQL APIs with Apollo Server! You'll create GraphQL Schemas using scalar types, object type, queries and mutations. Then create resolvers to fullfill the data. Use interfaces and unions. Finally, add authentication to lock down resources.
  • Scott Moss
Apollo Client State with React (lynda.com)
Jan 15, 2019
Discover how to manage client-side state using Apollo with React. Learn how to configure and query client state, mutate client state, mutate the cache, and more.
  • Eric Greene
GraphQL Data in React with Apollo Client (egghead.io)
Dec 05, 2018
This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.
Scalable Offline-Ready GraphQL Applications with AWS AppSync & React (egghead.io)
Nov 27, 2018
In this course, Nader Dabit will show you how to build a production-ready GraphQL API through AWS AppSync
Migrating from REST to GraphQL (lynda.com)
Nov 15, 2018
Learn how to migrate from REST APIs to GraphQL. Convert your REST APIs operations into GraphQL mutations and queries.
GraphQL With React & Apollo (youtube.com)
Nov 12, 2018
In this series we will build a small app using GraphQL, Express, React & Apollo.
Pro Gatsby 2 (leveluptutorials.com)
Nov 02, 2018
Learn how to build the fastest websites on the planet with this Gatsby v2, a new static site generator using React.
Full Stack Advanced React & GraphQL (advancedreact.com)
Oct 11, 2018
Learn everything you need to build a full stack application with React.js and GraphQL
Level 1 Apollo Client with React (leveluptutorials.com)
Jul 31, 2018
Learn the hottest GraphQL library out with Level 1 Apollo Client with React. In this series, I teach you how to connect to GraphQL APIs, the new Query, Mutation and ApolloConsumer components.
Rapid Development on AWS: React, Node.js & GraphQL (frontendmasters.com)
Jul 16, 2018
Learn how to make your way through all the Amazon Web Services' offerings
Level 2 React Native with GraphQL (leveluptutorials.com)
Jan 31, 2018
Over 25 videos, this series will teach you more complex aspects of React Native while using a GraphQL API
Full-stack GraphQL with Apollo, Meteor & React (leveluptutorials.com)
Jan 02, 2018
In this free series, I'll be teaching GraphQL with Apollo, Meteor & React to build a full-stack app.
Build a Twitter Clone with Apollo Graphql & React-Native (youtube.com)
Jul 18, 2017
The end product is to build a Twitter kind of clone where we have real time updates
  • Emanuel Quimper
GraphQL with React: The Complete Developers Guide (udemy.com)
Feb 17, 2017
Learn and master GraphQL by building real web apps with React and Node.
  • Stephen Grider

Podcast Episodes

Chris Toomey on TypeScript, GraphQL, and Product Thinking (reactpodcast.com)
Sep 19, 2019
This week we sit down with Chris Toomey and address all the holy wars: Elm vs React, TypeScript vs JavaScript, product vs development, and even VS Code vs Vim.
Eve Porcello on Learning GraphQL (reactpodcast.com)
Aug 08, 2019
This week we talk with Eve Porcello about getting started with GraphQL.
GraphQL and React – Even Better together with Chris Toome (devchat.tv)
Mar 26, 2019
In this episode of React Round Up, Chris Toomey talks about his work and his podcast and moves on to explaining the differences between a React vs GraphQL centric application.
  • Lucas Reis
  • Justin Bennett
  • Charles Max Wood
  • Chris Toomey
End-to-end Typesafe GraphQL Applications feat. Carlos Rufo (graphqlpatterns.simplecast.fm)
Feb 22, 2019
We talk about how to build typesafe GraphQL applications & what the benefits of doing so are.
Schema First vs Resolver First GraphQL Servers (graphqlpatterns.simplecast.fm)
Feb 08, 2019
This is an in-depth discussion in which we talk about the intricacies of API & server development at many levels.
RRU 046: GraphQL vs REST APIs with Max Desiatov (devchat.tv)
Jan 29, 2019
  • Charles Max Wood
  • Justin Bennett
  • Lucas Reis
  • Max Desiatov
Eve Porcello on GraphQL (egghead.io)
Sep 21, 2018
Today we are joined by Eve Porcello, who teaches Javascript, React, and GraphQL with Moon Highway.
JSJ 307: Apollo with Peggy Rayzis (devchat.tv)
Apr 03, 2018
In this episode, the JavaScript Jabber panelists talk about Apollo with Peggy Rayzis. She discusses what GraphQL is and how it is used, as well as how they use it in the Apollo team to make their lives as developers easier. They also touch on when it would work best to use GraphQL and when it is not ideal to use it.
  • Charles Max Wood
  • Aimee Knight
  • AJ ONeal
  • Peggy Rayzis

Libraries

react-apollo (apollographql.com)4736
v3.0.0
Aug 06, 2019
React integration for Apollo Client
  • Hugh Willson
  • Ben Newman
urql (formidable.com)1870
v1.3.0
Aug 05, 2019
Universal React Query Library is a GraphQL client, exposed as a set of ReactJS components.