React-query + Zustand + react-router-dom

[SaadNiaziDev]

Hello guys.
I am working on project and I opted for react-query for the first time.

I implemented mutations and queries to some extent, but I got stuck on major issue you can say.

Use case: PROTECTED ROUTES

How I achieved this before?

• Fetching context api ( get current user data using token ).
• Maded a state in zustand and wrote an function in zustand to update that state.
• Calling context function (zustand one ) when application loads. Like in App.jsx, call context function i useeffect and waits for response. Once response arrives, load the routes that I have created.

Now what I am trying?

• Maded zustand state and function to update that state.
• Tried wrapping routes in another component and doing lazy loading ( untill response arives )
• Tried using fetchQuery,PrefetchQuery and everything. Issue is this I cant get that state inside Loaders( react-router-dom). Everytime i get null which is initial value in zustand.

Here is my code from different files..

Main.jsx

Route.jsx

Loaders

Zustand store

It works if i presist user state in zustand but I dont want to presist user data. Someone can change role and access protected routes

Things I am using.

• Vite : 5.0.8
• react : 18.2.0
• react-query : 5.17.9,
• zustand : 4.4.7,
• react-router-dom : 6.21.1 ( createbrowserrouter / createhashrouter )

Hope to get some help from community.

[SaadNiaziDev]

My Bad. I didn't followed the example correctly.
Here is What I was doing Wrong. I was not passing queryClient as props.

passing queryclient

-_-