Server connect refreshing too often

mebeingken · March 4, 2023, 1:31am

Wappler Version : 5.4.3
Operating System : mac
Server Model: node
Database Type:
Hosting Type:

Expected behavior

A server connect should only auto refresh when one of it’s input parameters is modified.

Actual behavior

In the following circumstance, it refreshes prematurely as it seems a change to a query parameter.

How to reproduce

I have a server connect that auto loads based on a parameter id:

<dmx-serverconnect id="get_projects" url="api/projects/get_projects" dmx-param:challenge_slug="query.challenge_slug" dmx-param:sort="" dmx-param:dir="" ></dmx-serverconnect>

When I first navigate to the page with a challenge_slug the server connect executes and returns data…all good… For example:
http://localhost:8100/challenge/should-be

Screenshot 2023-03-03 at 5.20.21 PM

I then navigate to other areas, where each of the url’s has the identical challenge_slug. For example:

http://localhost:8100/challenge/should-be/p
http://localhost:8100/challenge/should-be/p/1004

and the server connect has not refreshed–as expected.

Screenshot 2023-03-03 at 5.22.09 PM
I then go another layer deeper:

http://localhost:8100/challenge/should-be/p/1004/d
and then back (via link with browser.goto) to:
http://localhost:8100/challenge/should-be/p/1004

At this point, the server connect reloads, which is not desired and not necessary.

Screenshot 2023-03-03 at 5.21.07 PM

You can see above that get_projects runs immediately after the 1004 fragment WITHOUT a challenge_slug, and then is followed up by another executing but with the challenge_slug.

This obviously causes problems as the data disappears then reappears.

Teodor · March 4, 2023, 10:53am

And does this happen when you use the browser back button? And is this a SPA with “internal” links when you navigate from one level to another?

mebeingken · March 4, 2023, 2:28pm

Thanks Teodor…the links are all internal and the behavior happens on browser back button as well.

mebeingken · March 7, 2023, 3:30pm

Hey @patrick. This one seems tricky, so let me know if I can help with more info.

bpj · March 7, 2023, 4:11pm

You could ween out the SC run without the slug by using a dynamic noload which will stop an auto load if the slug is empty:

dmx-bind:noload="query.challenge_slug ? '' : 'noload'"

I appreciate it’s possibly not a complete fix for your case

mebeingken · March 7, 2023, 4:35pm

Thanks Ben…I would have sworn I tried that in all my tests, but maybe in my haste I didn’t! That will certainly help.

dmx-bind:noload="!query.challenge_slug"

It still refreshes but it is obviously better than before.

Appreciate the reminder!

bpj · March 7, 2023, 4:37pm

I don’t think you can pass true/false for the dynamic noload. I think it needs the ternary to enter a string for the property

mebeingken · March 7, 2023, 4:45pm

Works for me, it definitely is preventing it from loading without the slug.

bpj · March 7, 2023, 4:47pm

Ah ok - maybe it’s an old workaround that’s no longer needed. I just use a ternary every time through habit… Time for change

patrick · March 9, 2023, 3:20pm

We listen to the popstate event to detect when the user navigates (back button pressed). It seems that when the popstate event is triggered it is possible that the document dom is not yet ready.

Window: popstate event - Web APIs | MDN (mozilla.org)

Could you test following update: dmxAppConnect.zip (26.6 KB)

mebeingken · March 9, 2023, 3:27pm

Thanks for that Patrick…I’m not seeing any change though.

patrick · March 9, 2023, 3:36pm

Thanx for checking, seems we need some more debugging. I’ve added some console logging to the code, can you please test this file and check in the console what it is logging. Can be a lot since it will log each time update is called.

dmxAppConnect.zip (26.7 KB)

mebeingken · March 9, 2023, 3:39pm

Seems to be a bunch of Update components

mebeingken · March 9, 2023, 3:42pm

And here is some using the back button in browser. Just to be really clear…the refresh of server connect happens on browser goto as well as back button.

Screenshot 2023-03-09 at 7.41.23 AM

patrick · March 9, 2023, 3:48pm

Do you also have the browser component on the page?

mebeingken · March 9, 2023, 3:50pm

Yes

Screenshot 2023-03-09 at 7.51.05 AM

patrick · March 9, 2023, 3:55pm

Added some extra logging

dmxAppConnect.zip (26.7 KB)

mebeingken · March 9, 2023, 3:58pm

appConnect.js:320 update components Set(141) {'running', 'flow_page_load', 'log', '$param', 'app', …}
appConnect.js:320 update components Set(13) {'value', 'hidden_project_status', 'selectedIndex', 'select_project', 'selectedText', …}
appConnect.js:320 update components Set(10) {'state', 'get_workspace_posts', 'get_all_hashtags', 'get_globals', 'sa', …}
appConnect.js:320 update components Set(4) {'id', 'socket_messaging', 'connected', 'disconnected'}
appConnect.js:320 update components Set(8) {'state', 'get_globals', 'downloadProgress', 'get_user_organisations', 'headers', …}
appConnect.js:320 update components Set(8) {'state', 'sa', 'downloadProgress', 'headers', 'paging', …}
appConnect.js:320 update components Set(7) {'state', 'get_organisations', 'downloadProgress', 'headers', 'paging', …}
appConnect.js:320 update components Set(4) {'status', 'get_workspace_posts', 'data', 'state'}
appConnect.js:320 update components Set(4) {'status', 'get_all_hashtags', 'data', 'state'}
appConnect.js:320 update components Set(9) {'state', 'current_user', 'downloadProgress', 'headers', 'paging', …}
appConnect.js:320 update components Set(14) {'btn10', 'conditional1', 'btn3', 'btn4', 'button', …}
appConnect.js:320 update components Set(4) {'link', 'repeat', 'repeat1', 'items'}
appConnect.js:320 update components Set(4) {'status', 'get_challenges', 'data', 'state'}
appConnect.js:320 update components Set(4) {'items', 'challenges_published', 'data', 'challenges_all'}
appConnect.js:320 update components Set(5) {'active', 'link', 'each_published_challenge', 'repeat', 'items'}
appConnect.js:320 update components Set(5) {'location', 'browser1', 'scrollY', 'document', '*'}
appConnect.js:320 update components Set(14) {'active', 'link', 'join_2_navtabs_nav_student', 'join_2_navtabs_nav_employed', 'join_2_navtabs_nav_other', …}
appConnect.js:320 update components Set(14) {'loading', 'content', 'flow_page_load', 'each_published_challenge', 'each_previous_challenge', …}
app.js:79 query was updated {challenge_slug: 'should-be'}
appConnect.js:320 update components Set(2) {'query', 'app'}
appConnect.js:320 update components Set(2) {'data', 'current_challenge'}
appConnect.js:320 update components Set(7) {'select_role', 'conditional3', 'conditional5', '*', 'input1', …}
appConnect.js:320 update components Set(7) {'value', 'hidden_challenge_id_2', 'hidden_challenge_id_3', 'hidden_challenge_id', 'selectedIndex', …}
appConnect.js:320 update components Set(2) {'state', 'get_projects'}
appConnect.js:320 update components Set(7) {'state', 'get_projects', 'downloadProgress', 'headers', 'paging', …}
appConnect.js:320 update components Set(5) {'value', 'select_project', 'selectedIndex', 'selectedValue', 'selectedText'}
appConnect.js:320 update components Set(2) {'focused', 'btn_projects'}
appConnect.js:320 update components Set(5) {'location', 'browser1', 'scrollY', 'document', '*'}
appConnect.js:320 update components Set(2) {'loading', 'content'}
appConnect.js:320 update components Set(19) {'loading', 'content', 'flow_page_load', 'btn_join', 'btn_workspaces', …}
appConnect.js:320 update components Set(7) {'repeat1', 'repeat', 'projects_cards', 'btn_', 'items', …}
appConnect.js:320 update components Set(2) {'state', 'get_project_stats'}
appConnect.js:320 update components Set(4) {'status', 'get_project_stats', 'data', 'state'}
appConnect.js:320 update components Set(2) {'value', 'project_return_to'}
appConnect.js:320 update components Set(5) {'location', 'browser1', 'scrollY', 'document', '*'}
appConnect.js:320 update components Set(2) {'loading', 'content'}
appConnect.js:320 update components Set(28) {'loading', 'content', 'flow_page_load', 'get_project_stats', 'btn1', …}
app.js:79 query was updated {challenge_slug: 'should-be', project_id: '1016'}
appConnect.js:320 update components Set(2) {'query', 'app'}
appConnect.js:320 update components Set(2) {'data', 'current_project'}
appConnect.js:320 update components Set(9) {'repeat1', 'content', 'state', 'get_project_comments', 'value', …}
appConnect.js:320 update components Set(4) {'status', 'get_project_comments', 'data', 'state'}
appConnect.js:320 update components Set(10) {'comment_edit_mode', 'repeat', 'each_project_comment', 'dropdown1b', 'link', …}
appConnect.js:320 update components Set(5) {'running', 'flow_page_load', 'data', 'state', 'log_page_view'}
appConnect.js:320 update components Set(2) {'state', 'get_project_stats'}
appConnect.js:320 update components Set(7) {'state', 'log_page_view', 'downloadProgress', 'headers', 'paging', …}
appConnect.js:320 update components Set(3) {'data', 'get_project_stats', 'state'}
appConnect.js:320 update components Set(5) {'location', 'browser1', 'scrollY', 'document', '*'}
appConnect.js:320 update components Set(2) {'loading', 'content'}
appConnect.js:320 update components Set(26) {'loading', 'content', 'delete_project_comment', 'get_project_comments', 'log_page_view', …}
appConnect.js:320 update components Set(2) {'items', 'each_document'}
appConnect.js:320 update components Set(2) {'state', 'get_project_document_stats'}
appConnect.js:320 update components Set(4) {'status', 'get_project_document_stats', 'data', 'state'}
appConnect.js:320 update components Set(7) {'location', 'browser1', 'scrollY', 'document', '*', …}
app.js:79 query was updated {}
appConnect.js:320 update components Set(7) {'query', 'app', 'data', 'current_project', 'current_challenge', …}
appConnect.js:320 update components Set(8) {'select_role', 'conditional3', 'conditional5', 'input1', 'conditional2', …}
appConnect.js:320 update components Set(37) {'value', 'hidden_project_id', 'hidden_challenge_id_2', 'input_project_title', 'input_project_summary', …}
app.js:79 query was updated {challenge_slug: 'should-be', project_id: '1016'}
appConnect.js:320 update components Set(4) {'query', 'app', 'state', 'get_project_document_stats'}
appConnect.js:320 update components Set(3) {'data', 'current_project', 'current_challenge'}
appConnect.js:320 update components Set(23) {'select_role', 'conditional3', 'conditional5', '*', 'input1', …}
appConnect.js:320 update components Set(3) {'data', 'get_project_document_stats', 'state'}
appConnect.js:320 update components Set(4) {'status', 'get_projects', 'headers', 'state'}
appConnect.js:320 update components Set(4) {'status', 'get_project_comments', 'data', 'state'}
appConnect.js:320 update components Set(10) {'comment_edit_mode', 'repeat', 'each_project_comment', 'dropdown1b', 'link', …}
appConnect.js:320 update components Set(5) {'state', 'get_projects', 'downloadProgress', 'headers', 'status'}
appConnect.js:320 update components Set(3) {'running', 'flow_page_load', 'data'}
appConnect.js:320 update components Set(2) {'state', 'log_page_view'}
appConnect.js:320 update components Set(2) {'state', 'get_project_stats'}
appConnect.js:320 update components Set(7) {'state', 'log_page_view', 'downloadProgress', 'headers', 'paging', …}
appConnect.js:320 update components Set(3) {'data', 'get_project_stats', 'state'}
appConnect.js:320 update components Set(5) {'location', 'browser1', 'scrollY', 'document', '*'}
app.js:79 query was updated {challenge_slug: 'should-be', project_id: undefined}
appConnect.js:320 update components Set(9) {'query', 'app', 'data', 'current_project', 'repeat1', …}
appConnect.js:320 update components Set(5) {'value', 'hidden_project_id', 'input_project_title', 'input_project_summary', 'inp_project_id'}
appConnect.js:320 update components Set(29) {'loading', 'content', 'delete_project_comment', 'get_project_comments', 'log_page_view', …}
app.js:79 query was updated {challenge_slug: 'should-be'}
appConnect.js:320 update components Set(7) {'query', 'app', 'repeat1', 'repeat', 'projects_cards', …}
appConnect.js:320 update components Set(2) {'state', 'get_project_comments'}
appConnect.js:320 update components Set(2) {'state', 'get_project_stats'}
appConnect.js:320 update components Set(4) {'status', 'get_project_stats', 'data', 'state'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(5) {'scrollY', 'browser1', 'viewport', 'device', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(4) {'scrollY', 'browser1', 'viewport', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}
appConnect.js:320 update components Set(3) {'viewport', 'browser1', 'document'}

patrick · March 9, 2023, 4:16pm

I’ve added also logging to the browser component to detect the event that triggers the update.

dmxBrowser.zip (1.6 KB)