Apollo GraphQL todo app

👷🏽‍♂️Work in progress!

Inspired by this tweet, this is a todo app based on Apollo GraphQL. It captures the way I like to use the GraphQL stack and will serve as a reference for me for the future (in case I spend the next year working on a Redux app!).

I'll probably build others eventually, but starting with Apollo GraphQL as it's my favourite stack at present.

Quick Start 🏃🏽‍♀️

This repo uses Yarn Workspaces and is set up so that the following should get things running:

$ yarn install
$ yarn setup
$ yarn start

Features

There are two distinct parts to this demo app, the client and the server:

Client

• Demonstrates graphql-codegen to automatically generate TypeScript types based on the remote schema
  • Data received and sent is fully typed
  • Auto generates React Hooks for Apollo Queries (queries are baked-in)
• Testing of GraphQL Queries and Mutations
• Optimistic updates when executing mutations

Server

• GraphQL Schema-first development approach
• Modular schema based around features, extending Query and Mutation
• Demonstrates a solution for the GraphQL n+1 problem using DataLoader. See todoListItemsLoader.
• Uses graphql-codegen to automatically generate types (based on the schema) for use in our resolvers.
• Uses SQLite 3 and Knex for light-weight persistent storage
  • Demonstrates migrations and seed data
  • Transactions

Work In Progress / Roadmap 👷🏽‍♂

Server

• Create read Schema
• Create stub read Resolvers
• Add graphql-codegen
• Add DB
• Wire up read Resolvers to DB queries
• Create mutations
  • Create List
  • Delete List (and child items)
  • Update List
  • Create Item
  • Delete Item
  • Update Item
  • Delete "Done" Items
• Complete pagination implementation
• Update List updated_at when updating a child item

Client

• Add Apollo Client
• Add graphql-codegen
• View Lists
• View Items in Lists
• Create new Lists
• Create new Items in Lists
• Complete Items in Lists
• Delete Lists
• Delete Items in Lists
• Update List name
• Update Item name

Nice to have enhancements

• Use skeleton screen when loading components
• Display number of items done/total on ListsItem

Tech

• Apollo Server & Apollo Client
• Sqlite3 / Knex
• GraphQL Codegen
• TypeScript
• React / react-scripts
• Prettier / pretty-quick / husky