T
TanStack•11mo ago
solid-orange

Does refetch() not invalidate the query?

I have this simple query which builds map of id and thing object. It calls useThings which returns array of things and it's wrapped in useMemo I have refetch in some other component and expect this to trigger change in here but id does not update the map values.
const useThing = (id) => {
  const { data: things } = useThings();

  const thingMap = useMemo(() => {
    if (things) {
      return things.reduce((acc, wo) => {
        acc[wo.id] = wo;
        return acc;
      }, {});
    }
  }, [things]);

  return useQuery({
    queryKey: ['Thing', id],
    queryFn: async () => {
      if (thingMap) {
        return thingMap[id];
      }
    },
    enabled: !!thingMap
  });
}
const useThing = (id) => {
  const { data: things } = useThings();

  const thingMap = useMemo(() => {
    if (things) {
      return things.reduce((acc, wo) => {
        acc[wo.id] = wo;
        return acc;
      }, {});
    }
  }, [things]);

  return useQuery({
    queryKey: ['Thing', id],
    queryFn: async () => {
      if (thingMap) {
        return thingMap[id];
      }
    },
    enabled: !!thingMap
  });
}
1 Reply
rotten-yellow
rotten-yellow•11mo ago
From your description, it appears that the dependency array for useMemo might not be updating as expected when things changes.

Did you find this page helpful?