TanStackT
TanStack•12mo ago•
3 replies
endless-jade

UseQuery not triggering a rerender

I'm facing unexpected behaviour with useQuery, if anyone could help it would greatly appreciated! issue is the query is stuck in loading
const MyComponent = () => {
  const { data, isLoading, error, isFetching } = useQueryHook();

  console.log({data, isLoading, error, isFetching})

  if (isLoading) return <Loader />;
  if (error) return <Error error={error}/>;
  
  return <Data data={data} />;
}



the console log prints out: 
{"data": undefined, "error": null, "isFetching": true, "isLoading": true}


,then right after it prints out: 
{"data": [.....], "error": null, "isFetching": false, "isLoading": false}


, but for some reason the Loading component is still there.


Here is what my use query hook is:
function useQueryHook(userId: string) {
  const queryKey = ["foo", userId];

  const queryFn = async () => {
    const { data, error } = await supabase
      .from("foo")
      .select(`level, user_id`)
      .eq("user_id", userId);
    if (error) throw error;
    return data;
  };

  return useQuery({ queryKey, queryFn });
}
Was this page helpful?