How to display simple-star-rating plugin stars in Gatsby site?

The simple-star-rating plugin is a custom input component for Sanity Studio that stores the rating data in your content - but displaying those stars on your Gatsby frontend requires some additional work on your part.

Important note: This plugin only works with Sanity Studio v2, which is deprecated. You should consider migrating to Studio v3 when possible.

How to display the stars on your Gatsby site

The plugin stores a simple number value (like 3 for a 3-star rating) in your Sanity documents. To display this as stars on your frontend, you need to:

1. Query the rating field in your Gatsby GraphQL query. If you added the field as shown in the plugin docs:

{
  title: "Rating",
  name: "rating",
  type: "rating"
}

Then query it like any other field:

query {
  allSanityYourDocumentType {
    nodes {
      rating
      # other fields
    }
  }
}

2. Create a React component to render the stars. Here's a simple example:

const StarRating = ({ rating, maxStars = 5 }) => {
  return (
    <div className="star-rating">
      {[...Array(maxStars)].map((_, index) => (
        <span key={index}>
          {index < rating ? '★' : '☆'}
        </span>
      ))}
    </div>
  );
};

// Usage in your page/component
<StarRating rating={data.rating} />

3. Style your stars with CSS to make them look good:

.star-rating {
  color: gold;
  font-size: 1.5rem;
}

The key thing to understand is that custom input components in Sanity only affect how you input data in the Studio - they don't automatically affect how data is displayed on your frontend. You're responsible for querying that data and rendering it however you want in your Gatsby site.

If you're having trouble querying the field, check your GraphQL schema in Gatsby's GraphiQL explorer (usually at http://localhost:8000/___graphql) to see exactly how the field is named in your schema.