FastAPI routes and fetch requests

[tclasen]

If I'm going to use idom as the UI for a web app where FastAPI is the backend, is it possible to execute a fetch request to grab data from an endpoint on the fastapi side? I can see in the docs / examples where static files are served us such as images or href, but I don't see anything about data. The example I can think of is a paginated table where the next button grabs the data to load for the next page of results.

[rmorshea]

All the code you write with IDOM is server-side. You have access to all the same data that your normal FastAPI routes would so there's no need to request data from a route. You might write this in the following way:

from idom import component, use_effect, use_state

@component
def MyTable():
    table_rows, set_table_rows = use_state([])

    @use_effect
    def get_table_rows_from_database():
        rows_from_database = get_rows_from_database(...)
        set_table_rows(rows_from_database)

    if not table_rows:
        return LoadingTableSpinner()
    else:
        return html.table(...)  # make a table out of `table_rows`

If your get_rows_from_database function happens to be async then your effect can be too.

@component
def MyTable():
    ...

    @use_effect
    async def get_table_rows_from_database():
        ...

    ...

Unfortunately there's not a lot of documentation on use_effect yet, but there's some minimal API docs on all the available hooks. I'd be happy to answer anything that's still unclear.

[rmorshea]

Here's a full working example:

from idom import component, html, run, use_effect, use_state


@component
def MyTable():
    page, set_page = use_state(0)
    table_rows, set_table_rows = use_state([])

    @use_effect
    def get_table_rows_from_database():
        set_table_rows(get_rows_from_database(page, page_size=2))

    def handle_page_forward(event):
        set_page(page + 1)

    def handle_page_back(event):
        set_page(page - 1)

    if not table_rows:
        the_table = html.div("...")  # fallback view while we wait for DB to respond
    else:
        the_table = make_table(table_rows)

    return html.div(
        the_table,
        html.button({"onClick": handle_page_back}, "Previous Page"),
        html.button({"onClick": handle_page_forward}, "Next Page"),
    )


def make_table(rows):
    keys = list(rows[0].keys())
    return html.table(
        html.tr([html.th(k.title(), key=k) for k in keys]),
        [html.tr([html.td(r[k], key=k) for k in keys], key=r["id"]) for r in rows],
    )


def get_rows_from_database(page, page_size):
    start_index = page * page_size
    end_index = start_index + page_size
    return MOCK_DATABASE[start_index:end_index]


MOCK_DATABASE = [
    {
        "id": 0,
        "name": "Homenaje a la Neurocirugía",
        "artist": "Marta Colvin Andrade",
        "description": "Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.",
    },
    {
        "id": 1,
        "name": "Eternal Presence",
        "artist": "John Woodrow Wilson",
        "description": 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
    },
    {
        "id": 2,
        "name": "Moai",
        "artist": "Unknown Artist",
        "description": "Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.",
    },
    {
        "id": 3,
        "name": "Blue Nana",
        "artist": "Niki de Saint Phalle",
        "description": "The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.",
    },
]


run(MyTable)

[tclasen]

Ok, so then I guess IDOM shouldn't been seen as a frontend you can use with fastapi as the backend, but rather an alternative to a API based server that you can run along side then?

[tclasen]

Which makes sense if the vdom for the client is stored on the server, then there is no need for FastAPI itself to send json to the client, just for the idom client-side to have to send it back to the server to calculate the needed vdom changes.

[rmorshea]

Correct.