useReviewMutation

The useReviewMutation hook provides methods for submitting product reviews. It is a specialized wrapper around useMutation that manages submission state and can automatically trigger refetching of review data upon success.

import { useReviewMutation } from '@archibald/product';

const { createReview, isLoading, isSuccess, error } = useReviewMutation(reviewOptions, fetchOptions);

Parameters

Name	Type	Required	Description
reviewOptions	ProductReviewsPostRequestOptions		Options for the review submission.
fetchOptions	FetchMinOptions		Standard options for the useMutation hook.

reviewOptions

• Type: ProductReviewsPostRequestOptions

Name	Type	Description
fields	string	Defines the depth of the returned review data after creation.

fetchOptions

Standard mutation options. See MutateOptions for more information.

Return value

Property	Type	Description
createReview	(productCode: string, reviewData: ProductReview) => Promise<ProductReview>	Function to submit a review.
isLoading	boolean	True if the mutation is in progress.
isSuccess	boolean	True if the review was successfully submitted.
isError	boolean	True if the submission failed.
error	DefaultResponseError | null	The error returned by the server.
resetError	Function	Clears the error state.

Example

import { useState } from 'react';
import { useReviewMutation } from '@archibald/product';

function ReviewForm({ productCode }) {
    const [rating, setRating] = useState(5);
    const [comment, setComment] = useState('');
    const { createReview, isLoading, isSuccess, error } = useReviewMutation();

    const handleSubmit = async (e) => {
        e.preventDefault();
        await createReview(productCode, { rating, comment });
    };

    if (isSuccess) return <p>Thank you for your review!</p>;

    return (
        <form onSubmit={handleSubmit}>
            <input 
                type="number" 
                value={rating} 
                onChange={(e) => setRating(Number(e.target.value))} 
                min="1" max="5" 
            />
            <textarea 
                value={comment} 
                onChange={(e) => setComment(e.target.value)} 
                placeholder="Write your review here..."
            />
            <button type="submit" disabled={isLoading}>
                {isLoading ? 'Submitting...' : 'Submit Review'}
            </button>
            {error && <p style={{ color: 'red' }}>{error.message}</p>}
        </form>
    );
}