Overview

The article discusses the modern Python web stack, highlighting the features and benefits of using specific libraries and tools. It focuses on the integration of SQLAlchemy asyncio extension, Strawberry GraphQL library, and codegen to generate typed React hooks in TypeScript. The goal is to create a strong and consistent data flow between the backend and frontend, improving the developer experience with type hints and error highlighting in the VS Code environment.

Features

• SQLAlchemy asyncio extension: Enables asynchronous database operations in Python web applications.
• Strawberry GraphQL library: Utilizes Python dataclasses and type hints for efficient GraphQL schema building.
• Codegen: Generates typed React hooks in TypeScript, improving type safety in front-end code.

Installation

To set up the modern Python web stack, follow these steps:

1. Install Python and NPM packages.
2. Drop and recreate all database tables.
3. Run the Python GraphQL backend on port :8000 (Next.js will reverse proxy /graphql to this port).
4. Start the GraphQL server.
5. Run the frontend code.

For a more detailed configuration, refer to the .vscode/settings.json file, which includes instructions for a nice VS Code setup with mypy errors, import sorting, and code formatting. Note that Pylance might not handle declarative type hinted SQLAlchemy models effectively, so the settings include the use of SQLA type stubs and a mypy plugin. The python.analysis.typeCheckingMode is switched off, and mypy is enabled instead.

Summary

The article explores the integration of SQLAlchemy asyncio extension, Strawberry GraphQL library, and codegen in a modern Python web stack. It emphasizes the advantages of using these tools for a typed developer experience, strong data consistency between the backend and frontend, and error highlighting in the VS Code environment. The installation process is outlined, along with instructions for configuring a VS Code environment for optimal development.