#isLoading/isFetching is always true and data never gets populated

11 messages · Page 1 of 1 (latest)

edgy smelt
#

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:

    "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 }
}```

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.
edgy smelt
#

Any help appreciated!

edgy smelt
#

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",

sly tangle
#

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

edgy smelt
#

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

sly tangle
#

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

edgy smelt
#

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)