Skip to main content

· 9 min read
Peter Dyer

After writing this post I was inspired to go further with the Apollo Client. It had been a while since I used subscriptions so I decided to continue to add subscription support to both the Server and Client from the previous post. This ended up being much more involved than I expected. There are a few little tricks that make it more difficult than I was expecting. However, I have come out the other side with an even better understanding of both the Apollo Server and Client, and in particular, the Apollo Client cache.

· 3 min read
Peter Dyer

Have you ever needed a quick GraphQL server to test or try something? On occasion I do and I often end up building a server locally from scratch. Libraries like apollo-server make this super simple.

To build a basic GraphQL server I install apollo-server, graphql, uuid (for easy id generation) and nodemon (to hot reload any updates I make). I add a little hard-coded data, define a graphql schema and add a few resolvers.

· 8 min read
Peter Dyer

In a recent project a few different streams of work converged. I thought it might be worth capturing some of the things I learned in a post.

I have previously used the Apollo Client. A lot of my work with it predates the release of React Apollo 2.1 where the Query and Mutation components were introduced. At the same time, I have been embracing render props whenever and wherever I can. It has become my preferred integration pattern whenever an option exists. So, it made sense to circle back on using the Query and Mutation components (they leverage render props) when the opportunity arose.

I recently started work on a project that uses AWS AppSync (AWS's GraphQL service). AWS AppSync provides a GraphQL client that is an extended (or enhanced) version of the Apollo Client. I believe the AppSync client exists to provide a more seamless AppSync experience but it also includes some extra bits such as offline capabilities.

The timing was perfect to not only learn about AppSync but to re-visit the Apollo Client and update my knowledge there too. Whenever I learn something new I tend start with a very simple project that I can later build on to do something more meaningful. That's exactly what I did in this case.

· 8 min read
Peter Dyer

Our application navigation is working great where we are leveraging react-router. However, we do have an issue when we perform navigation outside of our application. For example, if a user is logged in and they use the browser's address bar and enter a route we get what we probably think of as unexpected behavior - the application refreshes and the user is logged out. In fact, what is happening is that the state is flushed when the application is refreshed; which is what is happening when the user leverages the address bar in the browser. The same thing happens if we use the browser's refresh button or closes and reopens the browser. In this post we will address this undesirable behavior.

· 10 min read
Peter Dyer

In this post we will create a very contrived ToDo App in React leveraging AWS Amplify and AWS AppSync. This post assumes a basic understanding of AWS Amplify (link to the docs below). You can get away without knowing very much about AWS AppSync, but the end result may not mean very much to you.

AWS Amplify docs

Code for this post

· 14 min read
Peter Dyer

In this post it is time to start leveraging our authenticated user. Upon successful login (or register) we will bring the user inside the application. We will also give them a mechanism to leave the application (logout). One of the key ways to help a user understand where they are in our application is through the menu. We will do some menu refactoring to make this easier.