skills.rest
thistleknot
thistleknotCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-fastapi-sqlite

Scaffold a React and FastAPI CRUD app with SQLite persistence and TanStack Query.

Updated Apr 20, 2026
Search Tags:#typescript#react#fastapi#sqlmodel#sqlite#tanstack query#full-stack crud
One-click install
npx skills add https://github.com/thistleknot/skills --skill react-fastapi-sqlite
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-fastapi-sqlite
Source: https://github.com/thistleknot/skills/tree/main/react-fastapi-sqlite
Command: npx skills add https://github.com/thistleknot/skills --skill react-fastapi-sqlite

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accelerates building a working full-stack CRUD app by providing a proven React (TanStack Query) + FastAPI (SQLModel) + SQLite architecture, including correct data-flow boundaries and cache invalidation patterns so the UI stays consistent.

Core Features & Use Cases

  • Full-stack CRUD scaffold: SQLite persistence via SQLModel tables with FastAPI routers exposing CRUD endpoints.
  • Server-state correctness with TanStack Query: queryOptions for list/detail, plus mutations that invalidate the right query keys after create/update/delete.
  • Clean React architecture: fetch logic stays in api/ and hooks/; pages/ compose hooks; components/ remain pure UI.
  • Fast integration points: a ready-to-run project layout with CORS, axios base URL configuration, and a GET /health endpoint for sanity checks.

Quick Start

Scaffold the backend and frontend with the provided project layout for a React + FastAPI + SQLite app, ensuring TanStack Query hooks invalidate the items cache after mutations.

Frequently Asked Questions about react-fastapi-sqlite

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a full-stack React and FastAPI CRUD app with SQLite?▼

You can scaffold a full-stack React and FastAPI CRUD app with SQLite by using SQLModel for database tables and TanStack Query for server-state management. This approach provides a strict data-flow split across api, hooks, pages, and components directories.

How do I manage React cache invalidation with TanStack Query after FastAPI mutations?▼

To manage React cache invalidation with TanStack Query, configure mutations to invalidate the correct query keys after create, update, or delete operations. This ensures the UI stays consistent by automatically refreshing list and detail queries.

What's the best way to structure a React TypeScript client with FastAPI backend?▼

The best way to structure a React TypeScript client with a FastAPI backend is to keep fetch logic in the api directory, compose data hooks in the pages directory, and leave the components directory as pure UI for a clean separation of concerns.

Do I need CORS configuration for a React and FastAPI full-stack project?▼

Yes, you need CORS-compatible configuration for a React and FastAPI full-stack project. The architecture includes a ready-to-run project layout with axios base URL configuration and a GET /health endpoint to verify frontend-to-backend connectivity.

Can I use SQLModel and SQLAlchemy ORM together for a FastAPI SQLite backend?▼

Yes, you can build REST CRUD backends in Python using SQLModel, which is built on top of SQLAlchemy ORM and Pydantic. This combination allows you to define SQLite persistence tables and expose them through FastAPI routers seamlessly.

Why does my React UI show stale data after FastAPI CRUD operations?▼

Your React UI shows stale data after FastAPI CRUD operations when TanStack Query mutations do not invalidate the correct query keys. Implementing mutation-driven query invalidation forces the affected list and detail queries to refetch automatically.

Related Skills

Explore More Software Engineering Skills→
twarogowskitwarogowski
2

bun

Configure and use Bun as an all-in-one JavaScript runtime and toolchain.

Community
Advanced
zinohomezinohome
1

api-endpoint-generator

Generate CRUD REST API endpoints with validation and TypeScript types.

Community
Advanced
BarisSozenBarisSozen
1

pitfalls-tanstack-query

Solves common TanStack Query v5 pitfalls in data fetching and cache management for React applications.

Community
Intermediate
miketrombamiketromba
2

drizzle

Provide documentation and research for Drizzle ORM database operations.

Community
Intermediate