About the Author
Avatar photo

Mat Warger

I'm a software consultant with Keyhole Software in Kansas City. I am a coder and life-long student, also enjoying technology, learning, cooking, and gaming. Recent projects have included React, Angular, and Java.

State Machines Using XSTATE

An Introduction to State Machines Using xstate

Mat Warger Development Technologies, JavaScript, React, TypeScript 1 Comment

State machines are an old concept. They are a proven solution that provides a solid architectural foundation for application processes. In this article, I hope to provide an introduction to what they are and how they can be useful for a modern web or mobile application engineer. We’ll be focusing on one library in particular – xstate – and how it can allow anyone to easily leverage state machines for managing global or component state.

AWS Amplify GraphQL Queries with TypeScript and Hooks

Mat Warger AWS, Cloud, GraphQL, JavaScript, React, Tutorial, TypeScript Leave a Comment

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.

Generate Strongly Typed React Components with GraphQL

Mat Warger AWS, Development Technologies, GraphQL, JavaScript, Programming 1 Comment

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.

AWS AppSync with Lambda Data Sources

Mat Warger AWS, Cloud, Development Technologies, GraphQL, JavaScript, Tutorial Leave a Comment

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 data source for AppSync. Let’s gooooo!

Go Forth and AppSync!

Mat Warger AWS, Development Technologies, GraphQL, JavaScript 1 Comment

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 of a game. Follow along and we can implement a simple schema in AppSync together….