Use Query is always loading?

[danieludokike]

I have followed the instructions in the doc and can't pull data from the django db using the use_query. What am I doing wrongly?

[Archmonger]

Are you getting any errors in your browser console?
Are you getting any errors in your python terminal?
What version of Django and Reactpy-Django are you using?
Did you make sure to run database migrations prior to running this example?

[danieludokike]

I am using the latest version of django and reactpy-django. The browser and terminal has no issue and I made migrations and migrated as required. Can't tell where the issue might be coming from. Though I had the same issue @ 3.8.0 release when I knwe about the the library and wanted to explore, I stopped because of the issue and still facing now that I want to build an SPA with it. Please help. I have attachments that can assist below.

requirements.txt

[danieludokike]

I attached two more images to confirm that the Model migrations were


as successful as expected.

[Archmonger]

There was a typo in the docs, thank you for noticing this. I will fix the docs ASAP.

rendered_items = html.ul([html.li(item, key=item) for item in item_query.data])

needs to be changed to

rendered_items = html.ul([html.li(item, key=item.pk) for item in item_query.data])

The reason is key=... must always be a unique immutable value.

The value item.pk is both a string and unique.

[danieludokike]

Great!

[danieludokike]

The complete docs could be
rendered_items = html.ul([html.li(item.text, key=item.pk) for item in item_query.data])

[danieludokike]

Again, is there a way to subscript queries? Traditional django could be TodoItem.objects.all()[:10] any way to do that using the sync_to_async approach?

[Archmonger]

I'm pretty sure database_sync_to_async supports slices:

return await database_sync_to_async(TodoItem.objects.all)()[:10]

Async within the Django ORM is hit or miss though. If that throws an error, then you'll need to create a wrapper function.

def django_orm_query():
    return TodoItem.objects.all()[:10]

async def get_items():
    return await database_sync_to_async(django_orm_query)()

But ReactPy automatically does this kind of wrapper for sync queries, so for convenience you can write your query as a sync function.

def get_items():
    return TodoItem.objects.all()[:10]