Как подождать, пока запрос Tanstack завершит загрузку перед выполнением функции в React? ⇐ Javascript

[Anonymous]

У меня есть поток, в котором я получаю некоторые данные с запросом Tanstack, который затем используется для заполнения потока оформления кассе на кнопке. Когда пользователь нажимает кнопку оформления заказа, в браузере отображается прядильщик, если данные все еще извлекаются, а затем переходит к проверке после загрузки данных. Длинная массива зависимостей и длинные условные искают код запах ... < /p>

Код: Выделить всё

export default function MyComponent() {
const [pendingCheckout, setPendingCheckout] = useState<
null | "checkoutA" | "checkoutB"
>(null);

const {
data: checkoutSessionA,
isLoading: checkoutSessionAIsLoading,
} = useQuery({ ... });

const {
data: checkoutSessionB,
isLoading: checkoutSessionBIsLoading,
} = useQuery({ ... });

useEffect(() => {
const checkoutAIsReady =
pendingCheckout === "checkoutA" &&
!optionACheckoutSessionIsLoading &&
optionACheckoutSession;

const checkoutBIsReady =
pendingCheckout === "checkoutB" &&
!optionBCheckoutSessionIsLoading &&
optionBCheckoutSession;

if (checkoutAIsReady) {
triggerCheckout(checkoutSessionA);
setPendingCheckout(null);
}
if (checkoutBIsReady) {
triggerCheckout(checkoutSessionB);
setPendingCheckout(null);
}
}, [
pendingCheckout,
checkoutSessionAIsLoading,
checkoutSessionA,
checkoutSessionBIsLoading,
checkoutSessionB,
]);

return (
// ...
 setPendingCheckout("checkoutA")}
disabled={pendingCheckout === "checkoutA"}
>
{pendingCheckout === "checkoutA"
? "Proceed to checkout"
: 
}

// ...
)
}

До этого подхода я попробовал другой подход, в котором я создал переменную enqueuedfn состояния и нажал ссылку на функцию triggerCheckout на enqueuedfn на щелчок. Затем я использовал useeffect , чтобы прослушать Isloading , а затем вызовите enqueuedfn после завершения загрузки. Я сталкивался с ошибками, связанными с неправильным передачей ссылки на функцию, и в итоге переключил подходы к этому новому. Но мне интересно, был ли этот первоначальный подход лучше (более идиоматическим?), Или есть еще лучший способ сделать это.


Подробнее здесь: https://stackoverflow.com/questions/797 ... unction-in