jodybrewster / graphql-upload-example

GraphQL File Upload Example

This repo showcases how to build a full-stack server/client GraphQL app via Apollo, React, and TypeScript and how to upload a file via graphql mutation. I would have probably used NextJS for a final solution but I felt the need to show that I understand the fundamentals of setting up both.

Prerequisites

Node v14 Yarn v1.22

Setup

First, clone the repo locally and run:

$ yarn setup  # or npm run setup

This will install all of the necessary dependencies for the server and client portions of the app. Once that's complete, run:

$ yarn start # or npm start

This will

• Boot the web-app at http://localhost:3000
• Launch a backend server at http://localhost:4000
• Open up a GraphQL Playground interface at http://localhost:4000/graphql

App Structure

The app is composed of two sub-apps: a server and a client.

Server

The server is built with

• TypeScript
• Apollo Server
• Express
• Graphql-Upload

Client

The client is built with...

• Apollo Client
• Create React App.
• TypeScript
• Design System via Rebass and Styled System
• Routing via Reach Router
• CSS-in-JS via Styled-Components