Theo's Typesafe Cult•8mo ago

useQuery enabled depending on login state

Hi, I need to prevent useQuery from executing when the user isn't logged in. However, this requires me to include {enabled: isLoggedIn} in nearly all of my queries. I'm considering doing something like this:

const useAuthenticatedQuery = (options) => {
  const { data: isLoggedIn } = useIsLoggedIn();
  return useQuery({
    ...options,
    enabled: isLoggedIn && (options.enabled ?? true)
  });
};

const useAuthenticatedQuery = (options) => {
  const { data: isLoggedIn } = useIsLoggedIn();
  return useQuery({
    ...options,
    enabled: isLoggedIn && (options.enabled ?? true)
  });
};

Because this could potentially result in significant alterations to my codebase, I would like to seek your input before proceeding with it. Thank you ❤️

Solution:

That could be a solution. Are there any components or pages that do some action that only logged in users should see, then you could check if user is logged in and only render depending on that, that way you do not have to check if logged in on useQuery

Jump to solution

4 Replies

Solution

alexmartos•8mo ago

And make sure the server checks auth

BaBa•8mo ago

That's an excellent idea! I believe I can restrict certain queries by controlling the rendering of specific components. However, there are some background processes invoked directly within the App XD. It's possible that I may still need to implement the solution mentioned earlier for certain queries. Thanks for your response!

alexmartos•8mo ago

Oh, okay. Yeah for those that is a good solution If it helped please mark my solution to help others 🙂

Gaming

Programming

useQuery enabled depending on login state