Running a JS query "on page load" breaks after using Navigation / Go-to-app

  1. My goal: I need a JS query to reliably execute every single time an app/page loads

  2. Issue:

  • the JS query executes when I enter the app URL manually or when I refresh the browser manually
  • the JS query does not execute when I use a Retool navigation component to navigate from another app to my app
  1. Steps I've taken to troubleshoot:
  • the query no longer executes after using the navigation component
  1. Additional info:
  • tested on self-hosted 3.196.21

Hello @michael_h,

I checked your issue in my app (cloud) and noticed that you’re running the log query globally. That’s why it only executes on a full page refresh. I tested this in two ways and found that when you run the log JS query inside the page itself, the query reloads whenever you navigate from another app (see screenshot).

3 Likes

I think the term "on page load" could be misleading here - in this case it would refer to the app, not a "page" within the app. Perhaps it could be worded more clearly.

You should be able to implement this in the global space using a dummy SQL query that ties to the retool context for the current page.
e.g.


This query will run every time the page changes and that triggers the JS logActions query (which could be a log to the backend or whatever your use case needs)
In this example it simply adds an entry to an array that I'm displaying in a sidebar:

Here's the demo file, see how this works for you and if it could help you solve your problem.
page logger.json (22.3 KB)

3 Likes

Hey @WidleStudioLLP

thanks for having a look. Alas, my issues is not (only) with navigating between two pages of a multi-page app, but also with navigating between two different apps.

I tested out your suggestion, but it does not work for me when navigating from another app.

So, moving the JS query to page-level unfortunately does not fix my issue of the query not being triggered after using a navigation component to navigate to my app (with the JS query) from a different app - which seems like a Retool bug to me

Best
Michael

Hey @dcartlidge

thanks for having a look. Using "Query JSON with SQL" with SELECT * FROM {{ retoolContext.currentPage is a nice workaround to observe the page change event in the global code section. This allows to setup the query only once, which is helpful if an app has many pages and it would be impractical to setup queries manually on every page.

Unfortunately, also the query of type "Query JSON with SQL" is not executed, when I navigate to my app from a different app (via a navigation component).

It's almost like there is a bug in Retool's client side navigation implementation that prevents queries from being executed correctly.

Best Michael

Hey Michael,

I've tried to copy your app-to-app navigation problem but I'm struggling to replicate the situation.
I duplicated the dummy app I'd created earlier and added a header nav bar that allows me to switch between the 2 apps. They both fire the page change "logger" event when they arrive in the new app and page :thinking:

How is your navigation set up?

1 Like

Hey Dave,

thank you so much for giving it a second look - it's highly appreciated.

I think your first comment regarding "Query JSON with SQL" was already spot on. With your approach the query is always triggering - no matter whether it's a page-navigation or a cross-app-navigation.

Why didn't I see this? I was fully relying on the debug console to in my test :see_no_evil: - but it was not showing the full picture:

If Retool is using client-side navigation (e.g., when using a navigation component together with "goto app"), then the Retool debug console stays open, but loses the connection to the app and no longer displays query executions or console logs (at least for me). Manually closing and re-opening the debug console shows the queries again.

I've added notifications to all my queries to confirm that they are actually executing. E.g., I put this in my JS query "log":

const notification = `executed JS query on app '${retoolContext.appName}' and page '${retoolContext.currentPage}'` ;

console.log(notification);
utils.showNotification({ 
  title: notification 
});

It is setup like this:

Then I get the following behavior as a viewer:

So, thanks a lot Dave for solving my issue. Sorry that I didn't see this yesterday.

Feedback for the Retool implementation - the debug console shows quite confusing behavior, when client-side navigation is in play.

1 Like

No problem, glad it's resolved. I'll see if there is any way the console behaviour can be made clearer

1 Like