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). The closest example was an implementation with a Graphene/Django backend.

We add on routing and server-side rendering (SSR) with Found/Found-Relay by referencing this example.

This repository (released with MIT License) adapts code from all the above sources to provide an example TodoMVC app implementation that utilizes the following tech stack: Relay, Found, Typescript, Flask, Graphene, SQLAlchemy. It could serve as a starting point for further customization. For an earlier version without Found/SSR, check out this branch.

• Python3
• NodeJS
• Yarn

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

flask run

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

• https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project
• https://github.com/relay-tools/relay-compiler-language-typescript
• https://docs.graphene-python.org/projects/sqlalchemy/en/latest/tutorial/
• https://github.com/smbolton/relay-examples-todo-graphene
• https://github.com/relay-tools/found-relay/tree/master/examples/todomvc-universal