Get help on Discord

Discussion on how to display star ratings from a Sanity plugin on a Gatsby site

11 replies
Last updated: Oct 23, 2021
so I managed to install https://www.sanity.io/plugins/simple-star-rating but cant figure out how to display the stars on my gatsby site. Any help on what am I missing to display the stars?
AI Update

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
    }
  }
}
  1. 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} />
  1. 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.

so i have these pages, i was thinking how do i display the stars on the frontend/website? https://6172ae251eee3700070e2da1--ajmalafif.netlify.app/reviews/framer/
If they’re read-only on the front end, you can write a component that takes 
rating
(a number) and returns that many stars. You might also render out 
5 - rating
as star outlines for effect.
right okay thanks Geoff! there is a bit of gap in my knowledge now how to achieve that ill explore around thanks!
One approach might be to start by rendering the rating to your page (i.e., just show the rating in a div). That will ensure your queries work and you’re sourcing correctly. Assuming your query returns 
props.rating
, that might look like this on your page:

<p>{props.rating}</p>
Once that’s done, you can build a component that takes in one parameter: rating. The component might
also just render the rating to the page at this point, but now you can reuse it, move it to its own file, etc. It might be:

const StarRating = (rating) => <div>{rating}</div>
Then when you want to use it, you could use:


<StarRating rating={props.rating} />
If this renders out, then you’d rework the StarRating component to have it return stars instead of a number. It’s a function that takes a rating in and returns stars out.
One approach might be to start by rendering the rating to your page (i.e., just show the rating in a div). That will ensure your queries work and you’re sourcing correctly. Assuming your query returns 
props.rating
, that might look like this on your page:

<p>{props.rating}</p>
Once that’s done, you can build a component that takes in one parameter: rating. The component might
also just render the rating to the page at this point, but now you can reuse it, move it to its own file, etc. It might be:

const StarRating = (rating) => <div>{rating}</div>
Then when you want to use it, you could use:


<StarRating rating={props.rating} />
If this renders out, then you’d rework the StarRating component to have it return stars instead of a number. It’s a function that takes a rating in and returns stars out.
right thanks so much! i think i was struggling bcos i was looking at graphQL and cant find 
rating
somehow when i install the sanity plugin. So im not sure what i am missing
Ahh, good point. You’ll want to add it to your query.
Ahh, good point. You’ll want to add it to your query.
One approach might be to start by rendering the rating to your page (i.e., just show the rating in a div). That will ensure your queries work and you’re sourcing correctly. Assuming your query returns 
props.rating
, that might look like this on your page:

<p>{props.rating}</p>
Once that’s done, you can build a component that takes in one parameter: rating. The component might
also just render the rating to the page at this point, but now you can reuse it, move it to its own file, etc. It might be:

const StarRating = (rating) => <div>{rating}</div>
Then when you want to use it, you could use:


<StarRating rating={props.rating} />
If this renders out, then you’d rework the StarRating component to have it return stars instead of a number. It’s a function that takes a rating in and returns stars out.
thank you Geoff (im in SGT timezone so dont want to ping u on odd hour). I added the query by adding 
reateResolvers
in 
gatsby-node.js
. Cheers!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?