Python GraphQL Relay Todos

Fully fledged todo application using Strawberry GraphQL, FastAPI, Relay and React

project-demo.mp4

Tech Stack:

Backend stack

• Python
• FastAPI
• Uvicorn
• Strawberry GraphQL
• SQLAlchemy
• Asyncpg
• Alembic
• Result
• AioInject
• Structlog
• Pytest

Frontend stack

• TypeScript
• React
• Vite
• TailwindCSS
• Shadcn UI
• Relay
• React Router DOM
• React Hook Form
• Zod

Features:

• Dependency Injection in resolvers
• Usage of dataloaders to resolve nodes
• Relay spec compliant GraphQL server
• Connection handling, including inserts, updates and deletions
• Usage of Relay Client and fragments
• Cursor paginated connections
• End to end GraphQL code generation
• Fully tested GraphQL server
• User facing errors modelled within the schema

Starting the project

1. setup docker compose

docker compose up

2. install server dependencies

cd server
pdm install

3. setup database migrations

pdm run migrate

4. start the server

pdm run dev

5. install client dependencies

cd client
npm install

6. start the client

npm run dev

Generating the GraphQL schema

cd server
pdm run generate-schema

Running the Relay Compiler

cd client
npm run relay --watch