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 review
  • getItems - returns the review items
  • getRatesCount - returns an object with the rates count:
    • rate - returns the rate
    • count - returns the count
  • getReviewAuthor - returns the review author string
  • getReviewDate - returns the review date
  • getReviewId - returns the review id
  • getReviewMessage - returns the review message
  • getReviewMetadata - returns the review metadata object:
    • name - returns the name
    • values - returns the value:
      • id - returns the id
      • label - returns the label
    • id - returns the id
  • getReviewRating - returns the review rating number
  • getReviewsPage - returns the reviews page number
  • getTotalReviews - returns the total reviews number
  • getProductName - 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); }; }