Backend Query from widget is triggered once for each time you've navigated to a page

[dmosdallas]

Expected behavior (required)

When I navigate to a page that has a widget whose data is derived from an api query (as described here), I expect one request sent to the api backend to populate the widget.

Current behavior (required)

If I navigate to a page N times, the Nth time I go to the page, N queries are triggered for the widget. Additionally, any action that causes the page to redraw, N more queries are triggered for each redraw. It's really easy to cause this behavior -- and also appears to happen in the flutterflow app itself, from any project page (e.g., https://app.flutterflow.io/project/$YOUR_PROJECT). In chrome, you can open the network inspector, resize the window, and see the mountain of queries sent to firebase.

To Reproduce (required)

Create an app with two pages, one of the pages having a widget that is derived from an api call. Navigate back and forth between the pages a few times and then open up the network inspector (assuming chrome web). Each time you navigate to the page with the api-backed widget, instead of a single request, you will see one request for each time you've navigated to the page. What's worse, if you resize the network inspector, all those queries get retriggered each time the page is redrawn.

I was able to quickly trigger 1000+ queries to firebase from your app just by clicking between pages and then resizing the window a couple of times.

Context (required)

This causes clients to issue massively more queries than they need to, easily beating up backends handling expensive queries.

Screenshots / recordings

^ above, I cleared the network inspector in chrome and resized the window for a few seconds and caused over 600 queries to hit your firebase backend.

Your environment

• Bug Report Code:
• Version of FlutterFlow used: v3 October 5, 2022
• Platform (e.g. Web, MacOS Desktop): web (chrome)
• Browser name and version: chrome (106, but appears to be any recent version). Looking at the generated code, I expect this to happen on all platforms.
• Operating system and version (desktop or mobile): windows 11

[bulgariamitko]

I dont get it when you navigate to a page in FF or in a normal page in Chrome you still generate a request. This is normal behavior.

[dmosdallas]

Right, I expect that it should be creating a single request each time I load a page.

Currently, if you navigate to a page 3 times, the first time you navigate to a page, it creates 1 request (as expected), the second time it creates 2 requests, the 30th time it creates 30 requests (eek!), etc.

Playing around with this more, I think there are actually two things happening here. First is what I'm describing above which seems clearly wrong.

The other is that the backend query(s) seems to be re-issued each time the page is redrawn (e.g., you resize a window). I'm not sure if that's really a bug, but it seems a bit silly to trigger a database query for each intermediate frame when the window is resizing.

With these two behaviors combined, if I navigate back and forth 30 times and then resize a the window (which causes a few repaints), then I trigger hundreds of queries by just resizing the window which seems really suboptimal.

[dmosdallas]

Ah, okay, reading over the generated code, I think I'm sort of understanding it now.

This amplification behavior only happens when I navigate with the 'allow back navigation' setting enabled (looks to translate to context.pushNamed in the code). When I disable back navigation, the query only gets triggered once each time I go to the page (irrespective of the number of times I've navigated to the page).

I'm not super familiar with the internals of flutter's navigator, but is it possible that build (and the query within) is still triggered for every page in the navigator's history, even for pages not currently visible?

[organicnz]

@dmosdallas could you pls record your screen with Loom?

[bulgariamitko]

@dmosdallas , I am not a FF dev, but I am assuming that when you go to a page like I said it must trigger the request again. When you click on the back button it is just a back to the screen and it is not loading the screen again so that's why it is not sending the request again.

[dmosdallas]

@organicnz, sure! Here's a recording of a minimal reproduction of the issue.

I left some timestamped commentary in the description. Please let me know if you need any more details to reproduce.

[bulgariamitko]

Can you show us a screenshot of your widget tree please as well?

[dmosdallas]

@bulgariamitko, here are screenshots of the two pages in FF. Widget tree is on the left and the onTap action for the 'this page' button is pulled up on the right:

This is the page that's configured to make an api call to populate the second text object.

This is the page that is configured to make no api calls.

lmk if there's anything else you want to see to recap. Thanks!