Supabase Streaming Page Rebuild Issues

[mokaPotter]

Can we access your project?

• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

I have a simple chats page, for desktop screen size. The chat_list is on the left, and chat_messages on the right.

After a user selects a chat from the list, the chat_messages on the right do not update, even though the app state update works, and calls for a page rebuild.

This was working when I had a single time query because I called "refresh database request" in the action logic. Upon changing the chat_messages to a stream query, "refresh database request" is no longer permitted, and it just doesn't work anymore.

Expected Behavior

After a user selects a chat from the list, the page should rebuild and the chat_messages should be visible on the right (again, this was working as a single time query with refresh database request.)

Steps to Reproduce

1. Create two supabase stream queries on the same page. The left hand side should be a chat_list, the right hand side should be chat_messages.
2. chat_messages should have a reference to the chat_list PK
3. After a chat is selected from chat_list, update APP state activeChatId, to the id of the selected chat.
4. Select "Rebuild Page" in the action logic
5. Observe that no data is returned upon this action being made, even though the app state updated

---

6. Observe that it does work if you navigate back to the page in the action logic after updating App state
7. Observe that this does work for a single time query (instead of stream) when the action logic calls for 'refresh database request'

Reproducible from Blank

• The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT40h/Hfz5RIrul77s3uSPlX/SYmNVh+W5MvrtV7aCotCLbkOpgcf/fOYkRvZ/bidGNmIFr8jWoW0dbHuIbxUO0FNQ+CfIBOz5d+FjqUQj+QWq2VFJWgZHFPLJlnI0CeyrbUohJ4GPFfR0Zh2F2ICd6Ac3btJuPSC1gaD6/LZO4=

Visual documentation

Image attached

Environment

- FlutterFlow version: Version 5.2.8 (5.2.8)
- Platform: Web (desktop)

- Browser name and version: 
Chrome (Version 133.0.6943.143 (Official Build) (arm64))
DuckduckGo (Version 1.121.0 (340))

- Operating system and version affected: MacOS Sonoma 14.6.1 (23G93)

Additional Information

Already posted in the forum and was suggested to report bug:

https://community.flutterflow.io/ask-the-community/post/supabase-steam-query-problems-onSWGiVD1ePt8TD?highlight=4fj1Ac7d9FvbAc7

---

Chat GPT seems to think it the issue lies in the "??=" operator is what's causing the issue:

CHAT GPT's thoughts (if helpful):

Why the Query Isn't Triggered

When the FFAppState().activeChat.chatId changes, the stream query is not being re-evaluated because _model.chatMessagesDesktopSupabaseStream is already assigned and the ??= operator prevents it from being reassigned. As a result, the StreamBuilder continues to listen to the same stream, which is still tied to the previous chat_id.

Solution
To fix this, you need to ensure that the stream is re-evaluated whenever FFAppState().activeChat.chatId changes. One way to do this is to use a Stream that dynamically updates based on the current chat_id. You can achieve this by using a StreamController or by recreating the stream when the chat_id changes.

Here’s an example of how you can modify your code to recreate the stream when chat_id changes:

[Alezanello]

Hello!

Have you tried using "Rebuild All Pages" or converting the right side of the chat into a component that receives the AppState value as a parameter?

[mokaPotter]

Hi Alezanello,

Thanks for your reply. Yes I have tried that, it didn't do anything. And in your screenshot you are viewing the mobile responsiveness logic, that logic works fine.

The "FALSE" logic is for desktop screen size, which is where I have my problem.

Currently I have a hack solution now which renavigates the user to chat_home page. This refreshes the page and updates the chat_messages query, and the screen flashes which is rubbish UX. However, if you remove this action, and instead solely rely updating the app state and rebuild current page/all pages, nothing happens.

[Alezanello]

Hello! Sorry for the delayed response.

Could you try replicating this issue in a new blank project with only the essential elements needed to reproduce it?

[mokaPotter]

Hi Alezanello,

I have replicated the error in a blank project. Project id: chat-bug-3fmdvn. Here is the bug report code:

ITFflcr1z89goccB7oSIY/lv/TsRHD4cTZM3lOsYGEgdfLKqPKQUd/TEaXdeTbS+f2xmOUyIkj0G/tbtkYXPKPErEE6bQKl607p+bDzNTj2QMLnWC5aoX0QlDZpmBUig0Ji3kwlBOvpvdC1l62GHcq3qNleeY8aSfxBlZ7vfcPo=

to log in, please use account details:

test@test.com
test

Please test the page in desktop to see what is going wrong. Let me know if there is anything else.

Also, the supabase streaming query caching is still an issue, but from the thread (#5557) it sounds like that will need to be addressed here as well.

Let me know if there's anything else.

Cheers,

[Alezanello]

Thanks a lot for replicating everything on a new blank project, seems to be related to this issue based on the limitations on the Streaming Query on Supabase #4903

[mokaPotter]

Hi @Alezanello, I don't believe the filter is the problem. As the live stream does work if I have two test environments open and I am messaging from both of them. The message immediately appears on the screen of user 2 if I message from screen of user 1.

Chat GPT suggests that the issue is with the "??=" operator in the streaming query, the line of code is shown below:

stream: model.chatMessagesDesktopSupabaseStream **??=_** SupaFlow.client

Also, the caching issue is still a problem, can you advise on that one too please? #5557

[Alezanello]

Thanks for the update! It seems like everything is working as expected on my end when I run the project, so I might be missing something. Would you mind sharing a Loom or screen recording to show exactly where the issue is happening on your side? That’ll help me better understand and assist you more effectively.

[mokaPotter]

Hi @Alezanello , it is definitely still not working, please see attached Looms

Error state page (see action logic, there is no navigation back to page)
https://www.loom.com/share/56670683cddd4334a699eaa94c1098d4?sid=f5feee53-c7d8-4b57-864e-4d4f76e3eda9

See Hack Workaround (see action logic, user is redirected to the page each time, making a new database call for both the chat_list and chat_messages)
https://www.loom.com/share/14b22cafbcc449e4bff924779a1b0568?sid=50e34a55-26be-493b-9cdc-d1dc77cddefb

and again, the caching issue is also still an issue, can you please advise on this? @Juansarmi closed it to go through it here #5557

[Alezanello]

Hi again, and apologies for the delayed response.

I just re-tested the issue after watching your Loom video and checking the console. It looks like there's a RenderFlex error on the second page, which is causing the chat section to freeze — this is likely preventing the query from running and the content from loading properly.

I'd recommend addressing that exception first, as fixing it might resolve the issue you're seeing.

[mokaPotter]

Hi @Alezanello, I appreciate you trying but that is not the case. The render flex issue you are referring to is due to the dark mode setting widget in the bottom corner. As you can see in your screenshot, this is overflowed because you went into inspect mode.

This error is happening on both pages, please see screenshot:

Nevertheless, If I delete that dark mode setting widget and tried again, the page is still not working properly.

As mentioned in the beginning, I believe the issue is with the "??=" operator in the streaming query that is going to supabase, shown below:

stream: model.chatMessagesDesktopSupabaseStream ??=_ SupaFlow.client

Can you look into this?