Data-Driven React with Apollo, DynamoDB, and Infrastructure-Components

Build a full-stack React application with database access in minutes

Photo by Carlos Muza on Unsplash

TL;DR: In this post, we create a full-stack React application from scratch with Infrastructure-Components. We take some user input and store it in a database (DynamoDB) through a GraphQL interface. We also retrieve the data from the database and display it. We cover two ways of working with the database:

1. With React-Apollo’s components (<Query/> and <Mutation/>)
2. With React-Apollo’s hooks

Define the Architecture of Your App

We set up our project using Infrastructure-Components. These React-Components let us define our infrastructure architecture as part of our React-app. We don’t need any other configuration like Webpack, Babel, or Serverless anymore.

We can concentrate on the functional part of our app. This is: How to work with a database in React.

Infrastructure-Components support the creation of basic single-page apps as well as service-oriented-react apps. The latter support backend services and databases out of the box. This post provides the setup we are going to use in this post. But we’ll go through the main points here, too.

Infrastructure-Components-based projects have a single top-level component. This defines the architecture of your app. Sub-components (children) refine the app’s behavior and add functions.

For we create a full-stack app, we use the <ServiceOrientedApp/>-component as our top-level component. We export it as default in our entry point file (src/index.tsx).

A <ServiceOrientedApp/> is an interactive web-application. It supports the use of routes, services, and a database.

• A <Route/> is a page of your app. it works like the <Route/> in react-router. We can render anything from a simple <div/> to a page full of React components…