SQLModel with FastUI

[auh83]

Is there someone who try FastUI with SQLModel by tiangolo ?

I think it would be a good idea to use them together.

[hasansezertasan]

Can you elaborate what you mean by integration?

Edit: Did you try to use it before opening this one?

[auh83]

Can you elaborate what you mean by integration?

Edit: Did you try to use it before opening this one?

No, I didn't try yet. I will try as soon as possible !

[auh83]

My Project is to build a website with a frontend built with htmx and tailwindcss and an admin panel with FastUI and SQLModel.

This code works for Fastui/SQModel works in order to read sqlmodels 👍 :

`from datetime import date


from fastapi import FastAPI, HTTPException, Depends, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from fastui import FastUI, AnyComponent, prebuilt_html, components as c
from fastui.components.display import DisplayMode, DisplayLookup
from fastui.events import GoToEvent, BackEvent, PageEvent

from typing import List, Optional

from sqlmodel import Session, select

from database import create_db_and_tables, engine

from models.products import Brand, BrandForm, Category, Product


def get_session():
    with Session(engine) as session:
        yield session


app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates", autoescape=False)


@app.on_event("startup")
def on_startup():
    create_db_and_tables()


@app.get("/", response_class=HTMLResponse)
def featured_results(*, session: Session = Depends(get_session), request: Request):
    brands = session.exec(select(Brand)).all()
    categories = session.exec(select(Category)).all()
    products = session.exec(select(Product)).all()
    context = {'request': request, 'brands': brands, 'categories': categories, 'products': products}
    return templates.TemplateResponse("index.html", context)

@app.get("/api/admin/brands/", response_model=FastUI, response_model_exclude_none=True)
def brands_table(*, session: Session = Depends(get_session), request: Request) -> list[AnyComponent]:
    brands = session.exec(select(Brand)).all()
    """
    Show a table of four brands, `/api` is the endpoint the frontend will connect to
    when a user visits `/` to fetch components to render.
    """
    return [
        c.Page(  # Page provides a basic container for components
            components=[
                c.Heading(text='Marques', level=2),  # renders `<h2>Users</h2>`
                c.Table[Brand](  # c.Table is a generic component parameterized with the model used for rows
                    data=brands,
                    # define two columns for the table
                    columns=[
                        # the first is the users, name rendered as a link to their profile
                        DisplayLookup(field='name', on_click=GoToEvent(url='/admin/brand/{id}/')),
                        # the second is the date of birth, rendered as a date
                    ],
                ),
                c.Div(components=[
                    c.Link(
                        components=[c.Button(text="Add Brand")],
                        on_click=GoToEvent(url='/admin/brand/add/')
                    )
                ])
            ]
        ),
    ]

@app.get("/api/admin/brand/{brand_id}/", response_model=FastUI, response_model_exclude_none=True)
def brand_profile(*, session: Session = Depends(get_session), brand_id: int) -> list[AnyComponent]:
    brand = session.get(Brand, brand_id)
    if not brand:
        raise HTTPException(status_code=404, detail="Pas de marque existante")
    return [
        c.Page(
            components=[
                c.Heading(text=brand.name, level=2),
                c.Heading(text=brand.titre, level=3),
                c.Heading(text=brand.description, level=4),
                c.Link(components=[c.Text(text='Back')], on_click=BackEvent()),
            ]
        ),
    ]

@app.get('/admin/{path:path}')
async def html_landing() -> HTMLResponse:
    """Simple HTML page which serves the React app, comes last as it matches all paths."""
    return HTMLResponse(prebuilt_html(title='Admin Demo'))`

[auh83]

My question is if somebody knows how to create, update delete sqlmodels with FastUI ?

It is the beginning of my main.py code to create SQLModel models with FastUI but I have a 422 request error for the moment when accessing to /admin/brand/add url.

@app.get("api/admin/brand/add/", response_model=FastUI, response_model_exclude_none=True)
def add_brand(*, session: Session = Depends(get_session), request: Request):
    return [
        c.Page(components=[
            c.Heading(text="Add User", level=2),
            c.Paragraph(text='Add Brand to the system'),
            c.ModelForm[BrandForm](
                submit_url='/api/admin/brand/add/',
                success_event=PageEvent(name='form_success')
            )
        ])
    ]

[Zaubeerer]

Do you have a route @app.post("api/admin/brand/add/")?

I am experiencing a similar error in another context.

Therefore, I just created #111.

I created a minimal reproducible example that doesn't use SQLModel but results in the same (?) error.

[auh83]

Do you have a route @app.post("api/admin/brand/add/")?

I am experiencing a similar error in another context.

Therefore, I just created #111.

I created a minimal reproducible example that doesn't use SQLModel but results in the same (?) error.

I don't have the 422 error anymore, it was a problem of routes. I found my error in the Swagger docs. Now I have a 500 error !!

[auh83]

I have followed step by step the SQLModel and Pydantic Tutorial from @tiangolo in order to build my models. I have a 500 error 👍

ValidationError: 1 validation error for ModelForm model Extra inputs are not permitted [type=extra_forbidden, input_value=<class 'models.products.BrandCreate'>, input_type=SQLModelMetaclass] For further information visit https://errors.pydantic.dev/2.5/v/extra_forbidden (500)

Maybe @samuelcolvin , can you help me with the pydantic error "ModelForm model Extra inputs are not permitted"

[samuelcolvin]

@auh83 this is not a help site, you will have to work through these errors yourself.

There's nothing to suggest this is a bug with pydantic or FastUI, and you haven't provided enough information to help me debug.

ModelForm should be used like this:

FastUI/demo/forms.py

Line 88 in 106d6c5

c.ModelForm(model=LoginForm, submit_url='/api/forms/login'),

If you think there's a bug, please provide an MRE in a separate issue.

[auh83]

Here is my main.py code for the 500 error when creating an new brand :

from datetime import date
from typing import Annotated

from fastapi import FastAPI, HTTPException, Depends, Request, Form
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

from routers import api

from fastui import FastUI, AnyComponent, prebuilt_html, components as c
from fastui.components.display import DisplayMode, DisplayLookup
from fastui.events import GoToEvent, BackEvent, PageEvent
from fastui.forms import FormResponse, fastui_form
from pydantic import BaseModel, ConfigDict

from sqlmodel import Session, select

from database import create_db_and_tables, engine

from models.products import Brand, BrandCreate, Category, Product, BrandBase


def get_session():
    with Session(engine) as session:
        yield session


app = FastAPI(debug=True)
app.include_router(api.router)

app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates", autoescape=False)


@app.on_event("startup")
def on_startup():
    create_db_and_tables()


@app.get("/", response_class=HTMLResponse)
def featured_results(*, session: Session = Depends(get_session), request: Request):
    brands = session.exec(select(Brand)).all()
    categories = session.exec(select(Category)).all()
    products = session.exec(select(Product)).all()
    context = {'request': request, 'brands': brands, 'categories': categories, 'products': products}
    return templates.TemplateResponse("index.html", context)


@app.get("/api/admin/brand/add/", response_model=FastUI, response_model_exclude_none=True)
def form_content():
    return [
        c.Page(components=[
            c.Heading(text="Add Brand", level=2),
            c.Paragraph(text='Add Brand to the system'),
            c.ModelForm(model=BrandCreate, submit_url='/api/admin/brand/add'),
        ])
    ]

class BrandForm(BaseModel):
    model_config = ConfigDict(extra='ignore')
    name: str
    slug: str
    titre: str
    description: str
    image_url: str
    mini_image_url: str
    id: str
    products: list

@app.post("/api/admin/brand/add/")
async def create_brand(form: Annotated[BrandCreate, fastui_form(BrandCreate)]):
    print(form)
    return [c.FireEvent(event=GoToEvent(url='/'))]

@app.get("/api/admin/brands/", response_model=FastUI, response_model_exclude_none=True)
def brands_table(*, session: Session = Depends(get_session), request: Request) -> list[AnyComponent]:
    brands = session.exec(select(Brand)).all()
    """
    Show a table of four brands, `/api` is the endpoint the frontend will connect to
    when a user visits `/` to fetch components to render.
    """
    return [
        c.Page(  # Page provides a basic container for components
            components=[
                c.Heading(text='Marques', level=2),  # renders `<h2>Users</h2>`
                c.Table[Brand](  # c.Table is a generic component parameterized with the model used for rows
                    data=brands,
                    # define two columns for the table
                    columns=[
                        # the first is the users, name rendered as a link to their profile
                        DisplayLookup(field='name', on_click=GoToEvent(url='/admin/brand/{id}/')),
                        # the second is the date of birth, rendered as a date
                    ],
                ),
                c.Div(components=[
                    c.Link(
                        components=[c.Button(text="Add Brand")],
                        on_click=GoToEvent(url='/admin/brand/add/')
                    )
                ])
            ]
        ),
    ]



@app.get("/api/admin/brand/{brand_id}/", response_model=FastUI, response_model_exclude_none=True)
def brand_profile(*, session: Session = Depends(get_session), brand_id: int) -> list[AnyComponent]:
    brand = session.get(Brand, brand_id)
    if not brand:
        raise HTTPException(status_code=404, detail="Pas de marque existante")
    return [
        c.Page(
            components=[
                c.Heading(text=brand.name, level=2),
                c.Heading(text=brand.titre, level=3),
                c.Heading(text=brand.description, level=4),
                c.Link(components=[c.Text(text='Back')], on_click=BackEvent()),
            ]
        ),
    ]

@app.get('/admin/{path:path}')
async def html_landing() -> HTMLResponse:
    """Simple HTML page which serves the React app, comes last as it matches all paths."""
    return HTMLResponse(prebuilt_html(title='Admin Demo'))

[auh83]

@auh83 this is not a help site, you will have to work through these errors yourself.

There's nothing to suggest this is a bug with pydantic or FastUI, and you haven't provided enough information to help me debug.

ModelForm should be used like this:

FastUI/demo/forms.py

Line 88 in 106d6c5

c.ModelForm(model=LoginForm, submit_url='/api/forms/login'),

If you think there's a bug, please provide an MRE in a separate issue.

I don't think there is a bug but I don't know how to replace "LoginForm" by my SQLModel "BrandCreate" which is a Pydantic model too but I don't understand the pydantic "extra-type forbidden error" error. I'm trying to find the solution for me and helping others too like @Zaubeerer

[Zaubeerer]

@auh83, I agree with @samuelcolvin that debugging should not be discussed here.

You can join for example https://pybites.circle.so/home to connect with other Pythonistas like me to get general help related to Python. :)