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

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?

hey 👋 I have this https://github.com/ajmalafif/ajmalafif.com/blob/0e141b10a6533e7ee7c5464c759d48a4edb3ba5a/studio/schemas/documents/review.js#L36

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:

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:

Then when you want to use it, you could use:


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:

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:

Then when you want to use it, you could use:


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:

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:

Then when you want to use it, you could use:


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!