Typed Componentry with React, Apollo, Flow, and GraphQL
TL;DR: Using GraphQL? You can generate strongly-typed React components — read on!
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…
The power of GraphQL lies in its flexibility. That is especially the case regarding resolvers, where any local or remote data can be used to fulfill a GraphQL query or mutation. In this post, I’m going to demo a quick example of what this looks like, and a couple gotchas that were apparent in working with Lambdas as a datasource for AppSync. Let’s gooooo!
API Setup
I’m not going to get into the basics of setting up lambdas in this post, but I will point anyone over to the Serverless Stack tutorial. It is fantastic and I highly recommend getting familiar with…
In a previous post, we discussed the basics of GraphQL and how it can be a great REST API alternative. In this one, we’ll see how AppSync can be more than just a great API alternative — it gives you a soft landing into the world of GraphQL.
Recall our Game API example? Let’s start with the basic type for a game. Follow along and we can implement a simple schema in AppSync together.
type Game {
title: String!
description: String
rating: Int!
}Types and Resources
Head over to AppSync and sign in. In the top right, click “Create API”.
An Introduction to GraphQL with AWS AppSync
Eventually, you realize that API development is nothing more than list manipulation.
A Better Way to Think About Data
The REST is History
The basic premise of data transfer and involves requesting and receiving lists. This is simplistic, but it gets to the root of why we’ve developed the technologies and best practices to pass data using web services. RESTful APIs have grown to serve the needs of numerous individuals, startups, and enterprise companies across the world. They are useful, productive, and the concepts surrounding them are relatively standardised. If you don’t know how to create one, you can quickly find information building a great API that can grow to fit…
This is meant to demonstrate how to create an application AWS-Amplify with a focus on Authentication.
Some pages will require authentication, others will not.
Please note that I will be assuming familiarity with react and react-router. I will be assuming that you may be fairly new to AWS and the Amplify library, so we will touch on those elements in more detail.
Application and AWS Setup
- First, let’s create an app. We’ll be using create-react-app for this walkthrough. If you don’t have it already you can install it by running
yarn global add create-react-appin a terminal window. …
Use Redux! Use Mobx! Just use setState!
Redux is functional! Mobx is reactive! `setState` is built-in!
But Redux has so much boilerplate! But Mobx is more difficult to debug! But setState doesn’t scale!
Why don’t you just use Rematch to abstract the Redux boilerplate? Do I use redux-thunk? redux-saga? redux-observable?
How about using Unstated? How about just using the Context API?
:head-explodes:
There are a lot of options for developers regarding how and when to use state management libraries (SML).
Remember those last two articles about the massively underplayed game library? There was a third part to come — a…
The code for this walk-through is available here.
Note: I will be assuming some familiarity with React in general, including life-cycle hooks and props/state. If you need a refresher, checkout this great article here and the official React docs.
An Introduction to React Router
Previously, we looked at a very basic example of how one can benefit greatly by using community projects such as Formik to avoid the tedium of certain solutions while embracing convention to create composable and scalable applications. We will be building on that foundation to explore the objectively great library that is React Router.
React Router has been at the forefront…
The code for this walk-through is available here. Originally posted on the Keyhole Dev Blog.
React is a JavaScript library for building user interfaces. That’s it. It’s a way to use javascript to define UI elements based on user-defined properties and internal state.
First, hats off to @infinite_red for throwing together a stellar conference. You would think they’ve done a bunch of these with how well organized the whole thing was (Power strips in every row of the auditorium? Killer.). With this post, I’m merely attempting to brain dump some short-term reactions to the past couple days. I hope anyone that reads this can find some useful tidbits of information.
Here are a few standouts, in my opinion. No offense intended to those I may omit!
Mike Grabowski did a great deep dive of the react packaging system and webpack — this was…
Mat Warger
Coder, speaker, and life-long student. React, GraphQL, cloud. Sometimes I think too much on the weekends. Currently @KeyholeSoftware - thoughts are my own.
