Skip to content

TodoMVC using React/Relay/Found/SSR/Typescript frontend, Flask/Graphene/SQLAlchemy/GraphQL-WebSockets/Gevent backend

License

Notifications You must be signed in to change notification settings

kahkeng/relay-flask-sqlalchemy-todo-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 

Repository files navigation

TodoMVC using React/Relay/Found/SSR/Typescript frontend, Flask/Graphene/SQLAlchemy/GraphQL-WebSockets/Gevent backend

Summary

This repository (released with MIT License) adapts code from various sources to provide an example TodoMVC app implementation that utilizes the following tech stack: Relay, Found, Typescript, Flask, Graphene, SQLAlchemy, GraphQL-Websockets, Gevent. It could serve as a starting point for further customization.

For earlier versions without some optional features, check out the following branches:

Motivation

The Relay quick start guide references an example todo list app, but it is uses JavaScript with a mocked (non-persistent) database. There is a TypeScript port of this example app, and some online guides of using Flask as backend to React and Graphene/SQLAlchemy as a backend to GraphQL/Relay, but nothing that combines all of these into fully-featured example app (e.g. with mutations and subscriptions). The closest example was an implementation with a Graphene/Django backend but not one using Flask. This repository integrates from the above sources and show-cases a full-fledged app with our desired tech stack working cohesively together.

We add on routing and server-side rendering (SSR) with Found/Found-Relay by referencing this example. We also introduce subscriptions by referencing several implementations (graphql-ws with gevent, pubsub example, relay example), so multiple windows of the application will stay in sync with backend updates. We also introduce automatic paging of the list at load time to reduce initial page load time.

Prerequisites

Installation

Set up the backend

cd backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Seed the database

python seed.py

Run tests (optional)

pytest

Start backend server

python app.py

Set up the frontend

cd frontend
yarn install

Build the schema and Relay bindings

yarn update-schema
yarn build

Start frontend server

yarn start

Visit http://localhost:3000 in multiple windows and see updates reflected in all of them.

Credits