T
TanStack•10mo ago
continuing-cyan

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} />;
}
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}
{"data": undefined, "error": null, "isFetching": true, "isLoading": true}
,then right after it prints out: 
{"data": [.....], "error": null, "isFetching": false, "isLoading": false}
{"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 });
}
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 });
}
3 Replies
continuing-cyan
continuing-cyanOP•10mo ago
I've also tried adding notifyOnChangeProps: "all" and that didnt fix it
ambitious-aqua
ambitious-aqua•10mo ago
That's wierd. It looks like it should work. Can you get this reproducted in a Stackblitz example? What's in the Data component?
flat-fuchsia
flat-fuchsia•10mo ago
The useQueryHook() definition takes a userId as an parameter, but your implementation in the component doesn't have any argument passed to it. I agree with DogPawHat that a code reproduction would be super helpful.

Did you find this page helpful?