useReviews

The useReviews hook is a specialized wrapper around useFetch used to fetch user reviews for a specific product. It manages cache keys automatically based on the productCode.

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

const { data: reviews, isLoading, error } = useReviews(productCode, reviewOptions, fetchOptions);

Parameters

Name	Type	Required	Description
productCode	string	✔️	The code of the product for which to fetch reviews.
reviewOptions	ProductReviewsRequestOptions		Options for the review request (e.g., max count).
fetchOptions	FetchOptions		Standard options for the useFetch hook.

productCode

The unique identifier of the product.

reviewOptions

• Type: ProductReviewsRequestOptions

Name	Type	Description
fields	string	Defines the depth of the returned review data.
maxCount	number	The maximum number of reviews to return.

fetchOptions

Standard data fetching options. See FetchOptions for more information.

Return value

• Type: FetchResult<ProductReviewsData>

Property	Type	Description
data	ProductReviewsData | null	The reviews data retrieved from the backend.
error	DefaultResponseError | null	Any error that occurred during the fetch.
isLoading	boolean	True if the request is currently in progress.
isDone	boolean	True if the request has finished.
refetch	Function	A function to manually trigger a refresh.
request	DataRequest	The underlying DataRequest instance.

Example

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

function ProductReviews({ productCode }) {
    const { data, isLoading, error } = useReviews(productCode, { maxCount: 5 });

    if (isLoading) return <div>Loading reviews...</div>;
    if (error) return <div>Error loading reviews.</div>;

    const reviews = data?.reviews || [];

    return (
        <div>
            <h3>Customer Reviews ({reviews.length})</h3>
            {reviews.map(review => (
                <div key={review.id}>
                    <strong>Rating: {review.rating}</strong>
                    <p>{review.comment}</p>
                    <small>By: {review.alias}</small>
                </div>
            ))}
        </div>
    );
}