đź”® Sanity Create is here. Writing is reinvented. Try now, no developer setup

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?
Oct 22, 2021, 7:25 PM
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/
Oct 22, 2021, 7:58 PM
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.
Oct 22, 2021, 8:32 PM
right okay thanks Geoff! there is a bit of gap in my knowledge now how to achieve that ill explore around thanks!
Oct 23, 2021, 4:34 AM
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.
Oct 23, 2021, 5:38 AM
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.
Oct 23, 2021, 5:38 AM
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
Oct 23, 2021, 5:41 AM
Ahh, good point. You’ll want to add it to your query.
Oct 23, 2021, 5:43 AM
Ahh, good point. You’ll want to add it to your query.
Oct 23, 2021, 5:43 AM
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.
Oct 23, 2021, 5:38 AM
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!
Oct 23, 2021, 7:21 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?