Community Plugin
View plugin on GitHub
See starters using this

gatsby-source-yotpo-shopify

This source plugin allows you to access your Yotpo reviews and ratings through Gatsby’s GraphQL queries. It first connects to a shopify storefront API to get all products. It then uses the individual product review endpoint to query for each review. Finally the YotpoProduct Node gets added so it can be queried in gatsby.

This source plugin caters for a specific use case where reviews are set as both Product and Site inside the yotpo admin. If you use the all reviews endpoint the sku is randomly selected to be either a product sku or site_review. This means you can’t query for all reviews, just a subset of reviews.

Usage

yarn add gatsby-source-yotpo-shopify

Add the plugin to your gatsby-config.js

Add the credentials from your store settings in Yotpo and the Shopify Storefront API. The storefront token should have the following permissions:

  • Read products, variants, and collections
  plugins: [
    {
      resolve: 'gatsby-source-yotpo-shopify',
      options: {
      shopName: SHOPIFY_STORE_NAME,
      shopifyAccessToken: SHOPIFY_ACCESS_TOKEN,
      yotpoAppKey: YOTPO_APP_KEY,
      },
    },
  ]

Querying for Data

In your page queries, you can query for data like so:

{
  allYotpoProduct {
    nodes {
      id
      pagination
      bottomline {
        totalReview
        averageScore
        totalOrganicReviews
        organicAverageScore
        starDistribution
      }
      products {
        id
        domainKey
        name
        socialLinks
        embeddedWidgetLink
        testimonialsProductLink
        productLink
        imageUrl
      }
      reviews {
        id
        score
        votesUp
        votesDown
        content
        title
        createdAt
        verifiedBuyer
        sentiment
        productId
        imagesData {
          id
          thumbUrl
          originalUrl
        }
        user {
          userId
          socialImage
          userType
          isSocialConnected
          displayName
        }
        comment {
          id
          content
          createdAt
        }
      }
      productId
    }
  }
}

or for individual YotpoProduct reviews

{
  yotpoProduct(productId: { eq: $shopifyProductId }) {
    bottomline {
      totalReview
      averageScore
    }
    reviews {
      id
      title
      content
      score
      sentiment
      votesUp
      votesDown
      createdAt
      user {
        displayName
        userType
      }
    }
    productId
  }
}

For a full list of fields and descriptions of each, see the Yotpo documentation.