python-ts-graphql-demo

A demo that shows how an asyncio Python project with SQLAlchemy and Strawberry can give a typed frontend via codegen and TypeScript React hooks.

The project demonstrates how an asyncio Python project with SQLAlchemy and Strawberry can have a strong typed developer experience on the frontend through codegen and TypeScript React hooks. The README explains that SQLAlchemy now has an asyncio extension, and that Strawberry is a newer GraphQL library based on Python dataclasses that makes full use of type hints and mypy extensions. The primary language listed is TypeScript.

Codegen can generate typed React hooks in TypeScript, and the README presents the project as a template or reference. It is described as a mini version of the Inch tech stack, where the schema is monitored by codegen that creates urql TypeScript hooks. The goal was strong data consistency between the backend and the frontend, and a side benefit is a VS Code environment that surfaces potential errors when talking to the backend.

Getting started is short. Run the Python GraphQL backend on port 8000, and the Next.js app will reverse proxy the /graphql endpoint to it. The setup splits the Python backend and the Next.js frontend, with the proxy connecting them during development.

The README points to the .vscode/settings.json file for nice mypy errors, import sorting, and code formatting. It notes that Pylance does not yet deal well with declarative type hinted SQLAlchemy models, but there are good SQLAlchemy type stubs and a mypy plugin. That is why the settings switch python.analysis.typeCheckingMode off and enable mypy instead.

The README reads as a small argument for the stack: SQLAlchemy's asyncio extension, Strawberry's dataclass based GraphQL, and codegen that turns the schema into typed hooks. A VS Code setup section covers the editor side.

• Source 1 · Project repository
• Source 2 · README