use
component
Gets the latest optimistic data with matching optimistic id from actions. Use to accept optimistic data in forms.
Anchor to useOptimisticData-parametersParameters
Anchor to identifier
identifier
string
required
Was this section helpful?
Example
import {CartForm, OptimisticInput, useOptimisticData} from '@shopify/hydrogen';
export default function Cart({line}) {
const optimisticId = line.id;
const optimisticData = useOptimisticData(optimisticId);
return (
<div
style={{
// Hide the line item if the optimistic data action is remove
// Do not remove the form from the DOM
display: optimisticData?.action === 'remove' ? 'none' : 'block',
}}
>
<CartForm
route="/cart"
action={CartForm.ACTIONS.LinesRemove}
inputs={{
lineIds: [line.id],
}}
>
<button type="submit">Remove</button>
<OptimisticInput id={optimisticId} data={{action: 'remove'}} />
</CartForm>
</div>
);
}