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!
Replies (9)
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.
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
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
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
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
