In this post, we will explore Apollo Client integrated with a React application and how it provides an abstraction layer between a JavaScript application and a GraphQL server. The features Apollo Client offers make it a prime choice for devs also using GraphQL.
We’ll begin by discussing what Apollo Client is and how it can be advantageous over other state management libraries. And finally, we will look at some example React queries for retrieving and mutating data.
Let’s get started.
Attention: The following article was published over 3 years ago, and the information provided may be aged or outdated. Please keep that in mind as you read the post.This article is going to introduce you to Spring Boot with GraphQL. We’ll walk through a simple beer app to show you what it can do. So you have built this really …
This 33-minute video features Keyhole Principle Consultant Mat Warger at our internal employee lunch and learn in November 2020. He discusses GraphQL’s main features and how it’s beneficial for use in modern APIs.
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. Basically, it provides a better way to think about your data!
I’m a big fan of Amplify. I’m also a big fan of TypeScript. Amplify is not built with TypeScript, and to use it effectively, sometimes you need to give it a little help, especially when it comes to GraphQL. With the advent of hooks, we can create some nice utilities for ourselves that let us leverage the power of TypeScript with our GraphQL queries. Let’s see what that looks like.
I’ll be assuming familiarity with React and TypeScript, i…
—
Originally posted by Mat Warger on mw.codes April 19, 2019.
When developing in React, using a type system (like Typescript or Flow) can be a great help. You can be sure that your props and state are what you expect, at build-time, and code your components to match.
But what happens when you’re calling to an API to fetch some data, and the shape of that data is what really matters? Maybe the data get passed as props to a child component? You can create types for this, sure, but are they correct? Probably not! Or at least, probably not for long! Things change. Wouldn’t it be great if your types changed too?
In this post, we’re going to take a simple component from zero type awareness to fully typed, with local variables and GraphQL queries included, with a simple workflow. Grab a cup of coffee and a snack, and let’s see how this we can use GraphQL to generate type-safe components in React.
