RTK Query in react

Hi,

I am implementing a simple Redux ToolKit Query in the Topbar component, where the user info is fetched with a generated useQuery hook. Once the data is loaded the component is rendered and the data is passed down as props to the HeaderUserMenu component. The issue we are facing is that with this implementation, once the login happens and the dashboard is loaded with the Topbar, the menu dropdown is not opening on click. If we refresh the paged as logged in where the dashboard loads with the topbar directly, then the dropdown works but not after simple route change. What are we missing?

P.s: if simple useSelector hooks are used with separate store slices, it works, but we are migrating to RTK Query and no separate store is used to hold the data other than the cache.

Thanks for your suggestions in advance!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)

Hi,

In your components, add useEffect and try to re-init base Toggle and Menu components.
You can check an example here: demo1/src/_metronic/layout/MasterInit.tsx.

Regards,
Keenthemes support

Yes, I've tried that in Topbar with:

useEffect(() => {
MenuComponent.reinitialization()
}, [])

and other variations also, but it doesn't work.

Try to add setTimout with 50-100ms, cause your RealDOM should be rendered first and then re-init Menu and Toggle together.

Regards,
Keenthemes support

I tried with this and it doesn't work:

useEffect(() => {
setTimeout(() => {
MenuComponent.reinitialization()
ToggleComponent.reinitialization()
}, 500)
}, [])

In that case, try to debug your code, and you have re-init menus after your data is already returned from the server and HTML was rendered.

Regards,
Keenthemes support

I've spent many hours on this, but it seems nothing works.. it must be connected with RTK Query because the useQuery hooks create this strange behaviour. If I fetch the data in a different way, it works.

What do you think could be the issue with this?

Thanks

Hard to say, what exactly needs to be done in your case, anyway, we have the same behavior for the menu with ReactQuery, you can check UserManagement module and Filter component (src/app/modules/apps/user-management/users-list/components/header/UsersListFilter.tsx).

Regards,
Keenthemes support

Thanks Carmelo.

I managed to find a workaround. Before, I was using the useQuery hook's isLoading value to conditionally render the FallbackView/content in AuthInit module. Now, I have moved the isLoading in to the local state as below and that seems to have solved the issue.

useEffect(() => {
if (!isLoading) setShowSplashScreen(false)
}, [isLoading])

return showSplashScreen ? <FallbackView /> : <>{children}</>

Thanks for your helpful suggestions.

Glad to see that you solved the issue.

Regards,
Keenthemes support

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(