Building Real-time Offline-First Apps with React, GraphQL, & Amplify DataStore

Nader Dabit: [00:00] To get started, create a new React app by running npx create-react-app. Next, change into the directory and initialize a new amplify app by running npx amplify-app. Once the app has been created, you should now see an amplify folder within the React app.

[00:24] Next, let's open the project in our text editor. To create our data model, we'll go into amplify backend and open our schema.graphql. The app that we'll be creating is a Message app. Each message will contain an id, a title and a color.

[00:43] Next, jump back to the command line so we can install the dependencies that we'll be needing. The dependencies that we'll be adding are Ant Design for some UI components, react-color for our color picker and @aws-amplify/core and @aws-amplify/datastore.

@[00:56] aws-amplify/datastore uses data models based on a GraphQL schema to interact with the datastore API. We can generate these models by running npm run amplify-modelgen. This command will introspect your GraphQL schema and generate the necessary models for our app. We can now look in the src directory and see that we have a new models directory.

[01:25] Next, to initialize the amplify project in the cloud, we can run amplify init. Here, we'll give our environment name, choose our default text editor and then choose our AWS profile. We're now ready to deploy our app. To do so, we can run amplify push.

[01:47] Since we'll be working with the datastore API, we can choose no when asked to generate GraphQL code locally. Now that the backend has been deployed, we can open up the project in our text editor.

[02:04] The first thing we'll do is open index.js. Here, we'll import the Ant Design styling, Amplify from @aws-amplify/core, the configuration that was generated for us by the CLI located at ./aws-exports and then we'll call Amplify.configure passing in the config.

[02:24] Next, we can open up App.js. We'll start off by just deleting all of the code here. From React, we'll import the useState as well as the useEffect hooks. From React Color, we'll import the SketchPicker which is essentially just a color picker that we'll be using in the app.

[02:43] From Ant Design, we'll import the Input and Button components. From Data Store, we'll import the datastore API. Then we'll import the Message model from our ./models folder.

[02:56] For our initialState, we'll set a color property set to black and a title property set to an empty string. In the App component, we'll use the useState hook to create a few pieces of state. We'll create some form states to hold the formState, a messages array to hold the messages, and a showPicker boolean to show and hide the color picker.

[03:21] Next, we'll create an onChange handler. The onChange handler will check to see if the event has a hex color. If it does, we'll know that this event came from the color picker, and we'll update the color property. If not, we'll update the title property.

[03:37] Next, we'll create a fetchMessages and createMessage function. fetchMessages will call a DataStore.query, passing in the Message model. We'll then update the messages state by calling updateMessages, passing in the messages array.

[03:52] To create message function, we'll check to make sure that the title is not empty. If it isn't, it will call DataStore.save, passing in a new message including the formState. We'll then call updateFormState, passing in the initialState. We do this to clear the form.

[04:10] The useEffect hook will first call fetchMessages. We'll then create a new subscription by calling DataStore.observe, passing in the Message model. When a new message arrives, we'll then call the fetchMessages() function to update the UI with the new messages.

[04:40] In the UI, we'll set a title. We'll create an input component attaching the onChange handler, setting the value and passing in some styling. To toggle the color picker, we'll have a button that will invoke the updateShowPicker() function.

[05:06] When the color is updated, we'll display the color in our UI. Next, if the showPicker boolean is true, we'll render the color picker. To create a message, we'll have a button that when clicked, will invoke the createMessage() function. Finally, we'll map over all of the messages in the messages array, setting the background color as the message.color and the title as the message.title.

[05:46] For styling, we'll create some styles for the container, input, button, heading, messagBg, messageStyle and messageTitle. Finally, we'll set the default export to the App component. Now we're ready to test everything out.

[06:05] To do so, we can run npm start. To test the real-time functionality, we'll go ahead and open another browser window and create a new message. To test the offline functionality, we can open the network tab and set the network to be offline.

[06:59] When we create a new message, we'll see that the message shows up in our right-hand window but does not show up in our left-hand window. When we go back online, we see that the request is made, and then the message does indeed show up in the left-hand window.

[07:24] To view our app in the Amplify console at any time, we can run the amplify console command from our CLI.