Using GraphQL With React

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.

Defining fragments inside the components that render data brings many benefits.

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.

It's a mini Yelp clone where instead of reviewing restaurants, users review planets from the classic sci-fi series, Dune.

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.

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.

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.

Learn how to use GraphQL to upload files with multipart upload requests.

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.

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.

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.

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

Today, I know that GraphQL gives us the power to handle errors in a better and more explicit way.

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.

Facebook describes GraphQL as a “query language for APIs and a runtime for fulfilling those queries with your existing data”.

Learn how to build a React UI for a GraphQL service.

Learn and practice GraphQL by building a React note-taking app

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.

In this article, we’re going to implement simple end-to-end CRUD operations with GraphQL.

Today we’re thrilled to announce the addition of React Hooks to Apollo Client!

Testing GraphQL doesn't have to be difficult. This article will explore static and dynamic mocks to make testing GraphQL a breeze.

Today we're looking into working with a GraphQL API and discussing if you need to reach for a 3rd party library or not.

In this blog post we will go through building a server-rendered realtime collaborative todo list app with Next.js and AWS Amplify.

In this article, we are concerned with the build process, which is powered by GraphQL. This is the part where your data is managed.

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.

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.

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.

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!

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.

GraphQL meets React Hooks and forms a powerful friendship. They should connect with MobX too!

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.

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!

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.

Use gatsby-transformer-json to read data from a local JSON file and dynamically generate list items in a React component.

Decide which GraphQL library is right for you

GraphQL APIs are the future, and Apollo is the best way to integrate it into your React app right now.

How we power React component tests and examples at Stripe

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

This tutorial shows you how to use Apollo Client for GraphQL without any other third-party library.

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

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.

Learn how to build a GraphQL server with Apollo Server and Express with authentication, authorization, pagination, subscription, database access, tests.

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.

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.

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.

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.

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.

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.

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.

I want to show how to use apollo-link-state instead of introducing Redux or MobX in a React example application.

In this tutorial, you will learn how to combine React with GraphQL in your application by using Apollo.

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.

In this tutorial, you will learn how to combine React with GraphQL in your application.

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

Managing your local data in Apollo Client with apollo-link-state.

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.

Universally render your application with Apollo and Next

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.

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.

In this video, we will learn how to use API routes to set up a GraphQL API within a Next.js app.

Another video with my refactoring my AdvancedReact.com course

I discuss how I like to handle state management when I'm using Apollo and how to use it along side Redux.

Quickie on me refactoring React Apollo from Render.

I walkthrough and explain the GraphQL Typescript boilerplate I created that includes authentication via sessions.

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.

Learn how to add JWT authentication to your project with this fullstack tutorial using Node.js, Typescript, GraphQL, React, and PostgreSQL.

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.

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.

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.

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.

Gatsby uses GraphQL in a pretty unique way — type inference, automatic filter and connection generation.

We will explore an alternative way to manage forms using types and GraphQL.

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.

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.

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.

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.

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.

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.

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.

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.

Audi's Director of IT Digital Tech Solutions and Strategy, Jeff Titus, shares his GraphQL journey and lessons learned along the way.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

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.

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.

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.

In this course, Nader Dabit will show you how to build a production-ready GraphQL API through AWS AppSync

Learn how to migrate from REST APIs to GraphQL. Convert your REST APIs operations into GraphQL mutations and queries.

In this series we will build a small app using GraphQL, Express, React & Apollo.

Learn how to build the fastest websites on the planet with this Gatsby v2, a new static site generator using React.

Learn everything you need to build a full stack application with React.js and GraphQL

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.

Learn how to make your way through all the Amazon Web Services' offerings

Over 25 videos, this series will teach you more complex aspects of React Native while using a GraphQL API

In this free series, I'll be teaching GraphQL with Apollo, Meteor & React to build a full-stack app.

The end product is to build a Twitter kind of clone where we have real time updates

Learn and master GraphQL by building real web apps with React and Node.

Today we are joined by Eve Porcello, who teaches Javascript, React, and GraphQL with Moon Highway.

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.