useReview composable
useReview composable allows loading and adding product reviews.
API
useReview composable returns the following properties:
search- function that fetches reviews for the product matching the provided filters.loadCustomerReviews- function that fetches product reviews created by the current customer.loadReviewMetadata- function that fetches additional product reviews data.addReview- function that submits a new product review.error- ref that contains an errors from the composable methods.loading- ref that contains information whether any of the composable methods is loading.
Interfaces
/** * Almost every method is extending this type */ type ComposableFunctionArgs<T> = T & { customQuery?: CustomQuery; customHeaders?: CustomHeaders; }; interface UseReviewErrors { search: Error; addReview: Error; loadReviewMetadata: Error; loadCustomerReviews: Error; } interface CreateProductReviewInput { /** The customer's nickname. Defaults to the customer name, if logged in */ nickname: Scalars['String']; /** Ratings details by category. e.g price: 5, quality: 4 etc */ ratings: Array<InputMaybe<ProductReviewRatingInput>>; /** The SKU of the reviewed product */ sku: Scalars['String']; /** The summary (title) of the review */ summary: Scalars['String']; /** The review text. */ text: Scalars['String']; /** The reCaptcha Token. */ recaptchaToken?: Scalars['String']; } type GetProductSearchParams = { search?: string; filter?: ProductAttributeFilterInput; pageSize?: number; currentPage?: number; sort?: ProductAttributeSortInput; configurations?: string[]; }; type UseReviewSearchParams = ComposableFunctionArgs<GetProductSearchParams>; type UseReviewAddReviewParams = ComposableFunctionArgs<CreateProductReviewInput>; interface UseReviewInterface { search(params: UseReviewSearchParams): Promise<ProductReviewQuery['products']['items'] | []>; loadCustomerReviews(): Promise<CustomerProductReviewQuery['customer'] | {}>; loadReviewMetadata(params?: ComposableFunctionArgs<{}>): Promise<ProductReviewRatingsMetadataQuery['productReviewRatingsMetadata']['items'] | []>; addReview(params: UseReviewAddReviewParams): Promise<CreateProductReviewMutation['createProductReview']['review'] | {}>; loading: Readonly<Ref<boolean>>; error: Readonly<Ref<UseReviewErrors>>; } reviewGetters
reviewGetters is a set of helper functions that can be used to get data from the review object. They receive review object as a parameter and return the data from it.
getAverageRating- returns the average rating of the reviewgetItems- returns the review itemsgetRatesCount- returns an object with the rates count:rate- returns the ratecount- returns the count
getReviewAuthor- returns the review author stringgetReviewDate- returns the review dategetReviewId- returns the review idgetReviewMessage- returns the review messagegetReviewMetadata- returns the review metadata object:name- returns the namevalues- returns the value:id- returns the idlabel- returns the label
id- returns the id
getReviewRating- returns the review rating numbergetReviewsPage- returns the reviews page numbergetTotalReviews- returns the total reviews numbergetProductName- returns the product name
reviewGetters usage
import reviewGetters from '~/modules/review/getters/reviewGetters'; const productName = reviewGetters.getProductName(review); const reviewAuthor = reviewGetters.getReviewAuthor(review); const reviewMessage = reviewGetters.getReviewMessage(review); Example
Fetch product reviews and get review items:
import useReview from '~/composables'; import reviewGetters from '~/modules/review/getters/reviewGetters'; import { usePageStore } from '~/stores/page'; setup() { const { routeData } = usePageStore(); const { search, addReview } = useReview(); const reviews = ref(null); const getSearchQuery = { filter: { sku: { eq: routeData.sku, }, }, }; const fetchReviews = async (query = getSearchQuery) => { const productReviews = await search(query); const baseReviews = Array.isArray(productReviews) ? productReviews[0] : productReviews; reviews.value = reviewGetters.getItems(baseReviews); }; }