💬
Get Help
D
Drex

Trigger Backend Query API call inside component from within App.

Troubleshooting

We created a component of a listView we are using in our application. We wanted to create a component because our listView can have 4 different states and we only want to edit one component to make changes easier.

We currently trigger a Backend Query (external API call) inside the component. This is a "empty" search call so we get back all the possible results to populate our listview. However we also have a searchbar on our page, we want to when we typ something in the searchbar to retrigger the Backend Query so the results displayed in the listView change to the results we want. The same when we delete the text in the searchfield the results should be back all results.

What have you tried so far?

  • Before we had 4 listViews (and no component) we worked with conditionals and switched between listViews depending on the results we wanted (search, all results, ...) this worked perfect, but it was getting complicated because when we edited one view we had to edit 3 other views exactly the same, also with UI. (All of our different results had different API calls)

  • Now we created a listView as component. On load an API response is loaded (empty search call) returning all information. When we search in the text field we save the search words in our app state, the app state is used to fill the empty search query in the back-end query, we then navigate to the same page to reload the backend query with the search results. We also populate the searchbar with the app state so it looks like the same texts you typed is still in the text field. When you delete this text again an empty searchquery is send and all results are presented again. This how ever doesn't work fluently and also reloading the page for every new results is not really a good option. The UX has taken a real step back if we compare it to our first solution.

  • We are looking for a solution to re-trigger the backend query inside our component without having to reload the whole page. We only want that the data inside our listview is updated and not the whole page. The reason we opted for the backend query API call is because it give us the option to work with pagination and infinite scroll, something I can not seem to find working without this.

Did you check FlutterFlow's Documentation for this topic?
Yes