national-gold

isLoading/isFetching is always true and data never gets populated

This seems to happen when I move through different pages quickly that use different useQuery hooks. But the bug is inconsistent. Sometimes under the same circumstances it will load the data, other times it will not (maybe something to do with the caching?). dependencies:

`"@tanstack/react-query": "^5.62.7",
    "react": "^18",
    "react-dom": "^18",

`"@tanstack/react-query": "^5.62.7",
    "react": "^18",
    "react-dom": "^18",

I can also work to add the code snippets, but honestly they are very vanilla. They're incredibly basic useQuery hooks that calls a server function using prisma to a PostGresSql database. here is one of the hooks for example:

export function useAdminProjects(): {
  data: ProjectWithDetails[] | undefined
  isLoading: boolean
  error: Error | null
} {
  const session = useSession()

  const { data, isLoading, error } = useQuery({
    queryKey: ["adminProjects", session?.data?.user.id],
    queryFn: () => getAdminProjects(session?.data?.user.id as string),
  })

  return { data, isLoading, error }
}

export function useAdminProjects(): {
  data: ProjectWithDetails[] | undefined
  isLoading: boolean
  error: Error | null
} {
  const session = useSession()

  const { data, isLoading, error } = useQuery({
    queryKey: ["adminProjects", session?.data?.user.id],
    queryFn: () => getAdminProjects(session?.data?.user.id as string),
  })

  return { data, isLoading, error }
}

Any help largely appreciated as we've got a major release coming up! Thank you!! EDIT: I don't believe its related to the session, as I see the call to the backend get hit, and session.data.user.id is the proper value and the backend throws no error, nor the frontend.

6 Replies

national-goldOP•10mo ago

Any help appreciated! I believe its something related to the use of useSession. As my other useQuery hooks that don't implement it don't ever get caught up here is my next auth: "next-auth": "^5.0.0-beta.25",

passive-yellow•10mo ago

You might want to disable those query with skipToken when you don't have a user yet

passive-yellow•10mo ago

https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries/#typesafe-disabling-of-queries-using-skiptoken

Disabling/Pausing Queries | TanStack Query React Docs

If you ever want to disable a query from automatically running, you can use the enabled = false option. The enabled option also accepts a callback that returns a boolean. When enabled is false: If the...

national-goldOP•10mo ago

Thanks gonna attempt to implement. Although, the user is logged in in this case, so we do "have a user", it of course just takes till the 2nd re-render or whatever to populate

passive-yellow•10mo ago

You could choose to make the user a required prop of the component and not render the component in the first place till you have a user Or if you can swing react 19 you can use use to suspend the component till you have a user

national-goldOP•10mo ago

That could work but the page isn't dependant on a user being logged in or not This is the current flow of my components Page.tsx (Server component) -> Mission.tsx (Client component) -> Sidebar.tsx, where the hook is being called (Client component) Do I need to find a way to do something like this: Page.tsx (Server component) -> Mission.tsx (Server component) -> Sidebar.tsx, where the hook is being called (Client component)

Gaming

Programming

isLoading/isFetching is always true and data never gets populated

Did you find this page helpful?