Join us live Sept. 27 – How Sanity and Vercel powered Morning Brew's transformation –>

Display all the tags (and their category) of a single recipe.

1 replies
Last updated: Feb 10, 2021

My project is a recipe-app in React and I want to display all the tags (and their category) of a single recipe.I just can’t figure out how to write the schema’s.
When I inspect the document of the recipe, I only get _key and _ref.
What did I do wrong?

Feb 10, 2021, 2:03 PM

Hi Pieter, this is correct - the

_key
is to give each array item a unique identifier and the
_ref
is the ID of the referenced document. To show these references in your React app, you will need to use the dereferencing operator
->
to join them in your query.
For example, if you're using GROQ:

*[_type == "recipe"]{
  ...,
  thetags[]->{
    ...,
    category->
  }
}

Feb 10, 2021, 2:22 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.