Posts

Showing posts from January, 2019

Apollo Link

This is going to be my last post in our recent, impromptu series of posts about Apollo Client, and to a lesser extent Apollo Server. In the first posts we created a very simple Apollo Server and connected it to an equally simple Apollo Client. We worked with various techniques to keep our client and server in sync while also providing users a good user experience. In the end we implemented Optimistic Response where the client is immediately (optimistically) updated and the data sent to the server replaces the optimistic result after a round trip to the server. The relevant posts are: https://www.fullsapps.com/2019/01/working-up-to-optimistic-response-in.html https://www.fullsapps.com/2019/01/need-quick-graphql-server.html In the next post we implemented Subscriptions in both Apollo Client and Apollo Server. This is a useful feature when we want users to be immediately updated based on the activity of other users. In doing so we learned a lot about not only subscriptions but also

Apollo Subscriptions

After writing  https://www.fullsapps.com/2019/01/working-up-to-optimistic-response-in.html 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. Code Server:  https://github.com/peterdyer7/todo-server Client:  https://github.com/peterdyer7/todo-client Background In the previous version of our todo app (client and server) we simply had todo items that had an id, a name and a description. To make things a little more interesting for subscriptions I have added an additional type called Notes. Notes will have an id and text which is a string. I

AWS AppSync with AWS Lambda Data Source - Simple ToDo API

Image
In this post we will create a very simple (and not practical) Todo API using AWS AppSync with an AWS Lambda Data Source. This example is meant to outline the steps involved in the process and in no way creates a useful API.  Step 1 - Create Lambda Function In the AWS Console I am navigating to the Lambda service. Select the Functions page Click on Create function Select Author from scratch and complete the form Name = TodosAPIFuction (or another name if you prefer) Runtime = Node.js 8.10 Role = Choose an existing role If you don't have a role you want to use, select Create a custom role and Allow on the subsequent screen to create the lambda_basic_execution role Existing role = lambda_basic_execution Click on Create function On the subsequent screen scroll down to the Function code section Replace the code in index.js with the following (note that we are just mocking the adding of a todo, todos are not actually added to the list) exports.handler =

21. Media Library - Authorization: Client

Image
We have a page called Admin that is managed via local state. To make use of this page we need to start tracking a user's role somewhere so that we can use it to figure out what to show the user in the application. Code  https://github.com/fullsapps/media-library/tree/21.Authorization Background  Authorization with a Firebase application involves two parts, much like Authentication. The first part is limiting the front-end of our application to only show the user what makes sense for their role. The second part is making the back-end enforces the rules around what a user's role is allowed to do. We will focus on part one (the front-end) in this post. We are going to keep roles very simple in our application. We will have a 'user' and an 'admin'. Walk Through We will update our authenticate and authCheck actions to handle the user role. When a new user registers to the application we add a field called role with the value 'user'. When an exis

Working Up to an Optimistic Response in Apollo Client with the Query and Mutation Components

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 t

Need a Quick GraphQL Server?

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. This is my very basic GraphQL server. const { ApolloServer, gql } = require('apollo-server'); const uuidv4 = require('uuid/v4'); const todos = [   {     id: '1',     name: 'First todo',     description: 'something about the todo'   },   {     id: '2',     name: 'Second todo',     description: 'something about another todo'   } ]; const typeDefs = gql`   """   An item on a Todo list   """   type Todo {     id: ID!     name: String!     description:

AWS Amplify with GraphQL API (AWS AppSync) - Contrived React ToDo App Example

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 -  https://aws-amplify.github.io/ Code for this post -  https://github.com/peterdyer7/todo-aws-amplify-appsync Setting up AWS Amplify Following the Amplify documentation: I have an AWS Account I have installed and configured the Amplify CLI I am using the docs (and will use the libs) that pertain to React, starting here:  https://aws-amplify.github.io/docs/js/start?platform=react Building the App Part 1 - Preparation To get started building the app we will create a typical React app by using create-react-app. > npx create-react-app aws-todo > cd aws-todo I am going to use the next version of React. This gives us the ability to use hooks. > n