Reuse a mutation with dependency

[blessanm86]

Hi,

I am little confused on a use case and could use some help.
I have a useOrder query that returns the orderId and useChargeCard mutation that needs the orderId

Currently I handle this in the component like

const {data: order} = useOrder();
const [chargeCard] = useChargeCard();

if(!order) return null;

const onClick = () => chargeCard(order.orderId);
return <button onClick={onClick}>Charge Card</button>

My question is, how do I make the useChargeCard more reusable, where it handles getting the order data. So I don't directly need to call the useOrder query in every component that needs the useChargeCard mutation.

The only way I can think of is in the mutation fn to check the cache first or fetch the order. Is this an acceptable way? Or is the more better way to do it?

useMutation(async () => {
  const order = queryCache.getQueryData('order');
  if(order) {
    return chargeCard(order.orderId);
  } else {
    const order = await getOrder();
    return chargeCard(order.orderId)
  }
})

Or..., For my app almost every mutation depends on the order. Maybe I create a top level component that ensures order is fetched so that I can confidently access it from the cache in all the mutations in the child components.

[TkDodo]

I would add it to the custom useOrder hook, or create another one:

const useOrderMutation = () => {
    const {data: order} = useOrder();
    const [chargeCard] = useChargeCard();

    return () => {
        chargeCard(order.orderId)
    }
}

if you change the return type to something like this, you can spread it onto a button and it will be disabled as long as you have no orderId:

return {
    onClick: () => {
        chargeCard(order.orderId)
    }
    disabled: !!order
}

[blessanm86]

Ah i see, so return a mutation and flag to tell if it's ready. I believe this the return value that u intended.

const useOrderMutation = () => {
    const {data: order} = useOrder();
    const [chargeCard] = useChargeCard();

    return {
      canMutate: !!order,
      mutate: () => {
        chargeCard(order.orderId)
      }
  }
}

[TkDodo]

yes, I just used "button-ready" prop names (onClick, disabled) so that I can spread them on a button, but this couples it to buttons, so you don't have todo this:

const orderMutationProps = useOrderMutation()

<button {...orderMutationProps}>Order</button>

[TkDodo]

and I mistyped 😅 :

- disabled: !!order
+ disabled: !order

[blessanm86]

I understand. Thanks. I think this should work fine.