How to get referenced document attributes in a custom block serializer

27 replies
Last updated: Sep 9, 2021
Simple question but looks tricky: I created a custom Block in the Content Editor and used a “Reference” type for this (referencing to a Video schema which interacts with Mux). So i can easily pick an already uploaded video to appear right inside my blog. Problem is, in my serializer for this custom type, i only get back a _ref pointing to a document and not the needed infos like playbackId and other related things i get when i query the referred document itself. Is there an easy way to get back the referenced doc attributes from inside my render function?
Aug 30, 2021, 11:13 PM
// videoEmb.js
export default {
  name: 'videoEmb',
  type: 'object',
  title: 'Video',
  fields: [
      name: 'video',
      title: 'Video',
      type: 'reference',
      to: {type: 'videos'},

Aug 30, 2021, 11:15 PM
export default {
  title: 'Block Content',
  name: 'blockContent',
  type: 'array',
  of: [
      title: 'Block',
      type: 'block',
      type: 'videoEmb',
Aug 30, 2021, 11:15 PM
const serializers = {
  types: {
   videoEmb: (props) => {
     // here i need more 
     // than just _ref 
     // of doc inside props.node.
     // I need referenced attrs
Aug 30, 2021, 11:17 PM
my mux flavored Videos schema type:
export default {
  title: "Videos",
  name: "videos",
  type: "document",
  fields: [
      title: "Video file",
      name: "video",
      type: "",
      validation: Rule => Rule.required(),
In fact i need infos in my rendere which typically are exposed by subtype.
Aug 30, 2021, 11:25 PM
Possible Solution in gatsby (where the renderer reides):I could do a graphQL query in Gatsby to fetch the document by ID in the renderer.

So is this the best approach to this?
Aug 30, 2021, 11:31 PM
Dont even know if dynamic params in graphql are possible in gatsby outside of a page component.
Aug 30, 2021, 11:34 PM
Hey Marc! Do you have a particular reason for using a reference to a Mux asset? If not, in order to avoid having to expand that reference, you could just add
{ type: ''}
to your
array. You could then serialize it on your frontend by passing the video asset to sanity-mux-player .
Aug 31, 2021, 1:15 AM
Thanks for the suggestion, but i always thought using the type gets me mainly the upload capability and not the “select from existing videos” capability. Will try it out now though. Just seen that there is a “Browse” button on that component which might does the trick for selecting existing ones.
Aug 31, 2021, 8:31 AM
(btw, i did manage to do it with GraphQL, Gatsby and the Reference type, but it might be a weird solution, so i will try your proposed one)
Aug 31, 2021, 8:33 AM
tried using but wont change the problem that i dont get the needed attributes. See the two different ways:

body:{} 2 items

1:{} 2 items


video:{} 2 items



5:{} 3 items


asset:{} 1 item

Aug 31, 2021, 9:04 AM
Both of them only get me a reference into the props of my serializer.
Aug 31, 2021, 9:04 AM
Ah, you're right! I was going based off of this guide , but it doesn't give any info for adapting this for Gatsby/GraphQL
Aug 31, 2021, 10:02 PM
I like using directly inside PortableText even more than my approach. Problem is, the ref i get back with is somewhat not usable. I cant find the data with GraphQL.
Aug 31, 2021, 10:04 PM
So i am stuck with my “reference” approach which is not the best solution since the preview is kind of bad in the RichText Editor
Aug 31, 2021, 10:05 PM
I'll look through our ticket archives and see if a solution has come up before.
Aug 31, 2021, 10:06 PM
Aug 31, 2021, 10:07 PM
Aug 31, 2021, 10:07 PM
Are you using gatsby-source-sanity?
Aug 31, 2021, 10:28 PM
Aug 31, 2021, 10:29 PM
thats how my current serializer for my Reference to VideoPost works. I use GraphQL for getting the VideoPost Page via Ref.
Aug 31, 2021, 10:31 PM
Ok, I think you can use raw fields to resolve the reference in your query as mentioned here . That should get the actual asset, not just the
Aug 31, 2021, 10:32 PM
looks promising…. thanks
Aug 31, 2021, 10:32 PM
Let me know how it goes!
Aug 31, 2021, 10:33 PM
will do….
Aug 31, 2021, 10:33 PM
Had the time to inspect the raw fields, in my case the raw body of the blogpost where the is embedded. I see this in graphql:
“_key”: “d4379ae7d5dd”,
“_type”: “”,
“asset”: {
“_ref”: “29e883f1-21bb-44ff-ab79-d84a04169c0b”

the _ref is exactly the ID i get in my serializer. But what to do with that? The expanded attribtues for this vid are in a different structure in graphql where no ID matches:

“video”: {
“asset”: {
“playbackId”: “a01Q5yI6RIQjV1MkobmASWbH8BKpxihKsSHp8ZBdyK5A”,
“thumbTime”: 0,
“_key”: null,
“assetId”: “2daMSf5936Y6fTuORL298HLtwfEjmStABjrriVoLR7Y”,
“_type”: “mux.videoAsset”,
“status”: “ready”
“_rawAsset”: {
“_ref”: “-d974861b-cac9-5f8b-a158-59418996435c”
“_id”: “d970338c-1ebb-4f88-b9b4-cec9615c7e63"

So i still dont have the chance to get the important attribtutes for my renderer when using directly in portableText. I cant be the only one trying this
Sep 2, 2021, 11:05 PM
ok. Got it._rawAsset(resolveReferences: {maxDepth: 2})

is the key.. meaning exactly specifying maxDepth: 2. This reveal all those important details the clip has. But who is maintaing the plugin? It really makes no sense to grab the duration out of the _raw fields. They should be in the same nice accesible structure in graphql as the others (like playbackId, thumbTime, assetId,….) I am not sure if this plugin is responsible for the structure in graphql, but if yes, this would be a really useful fix. Its not related to my main question btw.
Sep 2, 2021, 11:25 PM
can you pass this thumbTime issue to the right person? I really tried to fix it myself but need some advice… the github issues page for is kind of dead
Sep 9, 2021, 4:03 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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?