Building a Full Stack App with React, TypeScript, and GraphQL
Published: 2020-03-14 20:05:57

---
title: Building a Full Stack App with React, TypeScript, and GraphQL
published: true
description: 
tags: 
---

## Introduction

Web development can be overwhelming. With countless libraries and frameworks out there, it can be hard to piece together technologies to build a complete full stack web application. Through trial and error, I've found a technology stack and development workflow for building web applications that works for me. Hopefully my setup will give you some ideas.

### What we’ll cover

In the post, I’ll give you an overview of the libraries and frameworks I use. I’ll explain how I structure my projects and walk through my typical development workflow. My goal is to show you how all the pieces fit together. 

### What we won’t cover

I will not be going in-depth on any specific technology. Instead, I’ll provide links to more detailed documentation and articles where you can learn more. If you’re looking for a comprehensive deep dive on building full stack web applications with React, I recommend checking out Wes Bos’ [Advanced React](https://advancedreact.com/) course.

## Table of contents

* [Architecture](#architecture)
* [Folder structure](#folder-structure)
* [Workflow](#workflow)
* [Demo](#demo)
* [Helpful links](#helpful-links)


## Architecture

![Architecture diagram](https://thepracticaldev.s3.amazonaws.com/i/dkkxyo48nuwwm8bev2f3.png)

### Frontend
* [React](https://reactjs.org/) - A JavaScript library for building user interfaces
* [Next.js](https://nextjs.org/) - A framework for building server-rendered apps with React
* [Emotion](https://emotion.sh/) - A library designed for writing CSS styles with JavaScript
  * [Styled Components](https://www.styled-components.com/) is another popular choice for writing CSS  styles with JavaScript.
* [Apollo Client](https://www.apollographql.com/docs/react/) - A GraphQL client and state management library for JavaScript apps
* [GraphQL Code Generator](https://graphql-code-generator.com/) - Generate code from a GraphQL schema

### Backend
* [Prisma](https://www.prisma.io/) - Database tools for modern application development
* [Nexus](https://nexus.js.org/) - Code-First, Type-Safe, GraphQL Schema Construction
* [GraphQL Yoga](https://github.com/prisma-labs/graphql-yoga) - Fully-featured GraphQL Server
  * [Apollo Server](https://www.apollographql.com/docs/apollo-server/) is another popular GraphQL Server.

### Deployment
* [Now](https://zeit.co/) - A static hosting platform
  * I use Now to deploy my frontend and GraphQL API.
* [Heroku](https://www.heroku.com/) - A cloud application platform
 * I use Heroku to run my Prisma Server and database.


## Folder structure

Here's how I structure my projects:

```
frontend/          # Where all the frontend code lives
  package.json     # Manifest file with a list of package dependencies for frontend
  next.config.js   # Config file for Next.js
  pages/           # Each file in this folder becomes a page with a URL based on its path
  graphql/         # GraphQL queries and mutations
  components/      # React components
  lib/             # Miscellaneous utility functions
  __generated__/   # Auto-generated React components and TypeScript types
backend/           # Where all the backend code lives
  package.json     # Manifest file with a list of package dependencies for backend
  src/            
    index.ts       # Entrypoint for the GraphQL server
    schema.ts      # Schema definition for GraphQL Server
    __generated__/ # Auto-generate TypeScript types
  prisma/          # Prisma datamodel and config files
```

> Note: I use [Yarn Workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) to easily manage dependencies and run scripts for both the `frontend` and `backend`.


## Workflow

To illustrate my typical development workflow, let's walk through the process of adding displaying a list of posts on our application: 

### 1. Start the development server

To start local development, we can run `yarn dev` from the root directory.

```
yarn dev
```

This will run the frontend development server on `localhost:3000` and the GraphQL API server on `localhost:4000`.

### 2. Update the datamodel

Next, in `backend/prisma/datamodel.prisma`, we need to create a `Post` type:

```graphql
type Post {
  id: ID! @id
  createdAt: DateTime! @createdAt
  updatedAt: DateTime! @updatedAt
  author: String!
  title: String!
  content: String!
}
```

This is a special language for defining datamodels in Prisma. It’s similar to how you define GraphQL schemas.

### 3. Deploy the datamodel changes

Before we can do anything with our new Post type, we have to deploy our changes:


```shell
prisma deploy
```

This will automatically run a database migration and generate a GraphQL API that will allow us to perform CRUD options on posts. It will also generate TypeScript types that we can use in our GraphQL API.

### 4. Update the GraphQL API

Next, we need to update our GraphQL API to enable our frontend to display and edit posts. Since Prisma’s GraphQL API already exposes CRUD operations for posts, we can just proxy those fields. Here’s how we do that with Nexus:

```diff
const Query = prismaObjectType<'Query'>({
  name: 'Query',
  definition(t) {
    t.prismaFields([
+     'post', 
+     'posts',
    ])
  },
})

const Mutation = prismaObjectType<'Mutation'>({
  name: 'Mutation',
  definition(t) {
    t.prismaFields([
+     'createPost',
+     'updatePost',
+     'deletePost',
    ])
  }
})

```

### 5. Write a GraphQL query

We use the `frontend/graphql` directory to co-locate all the queries and mutations used in the frontend. So, let’s create a file called `getPosts.graphql` in this directory and write a query to get a list of posts:

```graphql
query getPosts {
  posts {
    id
    createdAt
    title
    content
  }
}
```

### 6. Generate GraphQL types and components

Before we can use this query, we need to generate React components and TypeScript types for it. This is where [GraphQL Code Generator](https://graphql-code-generator.com/) comes in handy. With one command, we can generate React components and types for all `.graphql` files in our project:

```
gql-gen
```

The generated output will be placed in `frontend/__generated/graphql.tsx`.


### 7. Update the frontend

In any React component, we can now import the code generated by GraphQL Code Generator and use it display a list of posts:


```jsx
import { GetPostsComponent } from '../__generated__/graphql'

export default function App() {
  return (
    <GetPostsComponent>
      {({ loading, error, data }) => {
        if (loading) return <p>Loading...</p>
        if (error) return <p>Error: {error.message}</p>
        return (
          <ul>
            {data.posts.map(post => (
              <li key={post.id}>{post.title}</li>
            )}
          </ul>
        )
      }}
    </GetPostsComponent>
  )
}

```

### 8. Deploy

We've now made all the necessary frontend and backend changes to display posts. It's time to deploy our changes. With [Now](https://zeit.co), we just need to run a single command: 


```shell
now
```

Now will deploy the application to a unique URL (e.g. `my-app-f9shcvmf1.now.sh`).

## Demo

If you're interested in seeing this technology stack and workflow in a real project, check out https://github.com/colebemis/dasher.  

## Helpful links
* [Advanced React & GraphQL by Wes Bos](https://advancedreact.com/) 
* [How to GraphQL - The Fullstack Tutorial for GraphQL](https://www.howtographql.com/)