How to make the ApolloClient useQuery method to await

  const claimableItemId = "5ab7c5ab-7a3d-4a92-a62f-2fbd995955f6";
  const destAddr = "0x387961b46242A42B445D4354d5048329410613a7";
  const [redeemEarnableItem, { data: redeemItem }] = useMutation(
    REDEEM_EARNABLE_ITEM,
    {
      variables: {
        claimableItemId,
        destAddr,
      },
    }
  );

  const [getInvoiceDetails, { loading, data: invoiceDetails, refetch }] =
    useQuery(GET_INVOICE_DETAILS);

  const redeemHandler = async () => {
    try {
      const redeemItem = await redeemEarnableItem();
      const id = redeemItem.data.redeemEarnableItem.invoiceID;
      console.log(id, "id");
      setInvoiceId(id);
      const { data } = await refetch({ variables: { invoiceID: id } });

      const claimedItems = data?.getInvoiceDetails?.items;
      const lastItem = claimedItems[claimedItems.length - 1];
      console.log(lastItem, "lastItem");
      setNFTDetails(lastItem);
    } catch (error) {
      console.error("Error during refetch:", error);
    }
  };

From the above code, When I run the "redeemHandler" function, I’m getting the invoiceId and passing it to the useQuery. But due to it’s async behaviour, it is not waiting for the data to fetch. Instead it exits the function without getting the data. So, the code that is depend on the fetching comes undeifined. I want to make the useQuery to wait until the data fetches. How to do that? Any help on this would be appreciated since I’m new to Apollo clinet.