useOptimisticMutation

• This is a hook that returns a mutation using useMutation from React Query for optimistic updates.

Features

• It returns the same values as useMutation from React Query

Types

const useOptimisticMutation: <DataType, VariableType>({ mutationKey, mutationFn, onMutate, }: Required<Pick<MutationOptions<DataType, Error, VariableType, DataType>, "mutationKey" | "mutationFn"> & {
    onMutate: (previousValues: DataType | undefined, variables: VariableType) => DataType;
}>) => UseMutationResult<...>

Example

const useRemoveCardMutation = () => {
  useOptimisticMutation<{}[]>({
    queryKey: [QUERY_KEY.CARDS],
    mutationFn: removeCard,
    onMutate(cards, removedCardId) {
      return cards.filter(card => card.id !== removedCardId);
    },
  });
};