How to retrieve a referenced field data inside inputComponent in Sanity.io?

Question

In Sanity Studio, I was trying to get all Document's properties inside an input Component. Follow this article An officially supported way to get at the document content I was able to use withDocument HOC to get Document data, but some of them have the type of "reference" thus I can only get _ref and _type instead of the entire object. How can I make it?

Answer 1

I've figured it out by using Sanity Client.

Import the client in your component:

import client from 'part:@sanity/base/client';

Start to query using _ref as the _id in your GROQ query

...
componentDidMount = () => {
    client.fetch(`*[_type == "template" && _id == "<put _ref value here>"]{
      title,
      body
    }`).then(response => {
      console.info('RESPONSE', response);
    })
  }