Does refetch() not invalidate the query?

I have this simple query which builds map of id and thing object. It calls

useThings

useThings

which returns array of things and it's wrapped in useMemo

I have

refetch

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
  });
}

TanStack•14mo ago•

1 reply

primary-violet

Does refetch() not invalidate the query?

I have this simple query which builds map of id and thing object. It calls

useThings

useThings

which returns array of things and it's wrapped in useMemo

I have

refetch

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
  });
}

Does refetch() not invalidate the query?

Similar Threads

Does refetch() not invalidate the query?

Similar Threads

Similar Threads

Similar Threads