Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

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: "mux.video",
      validation: Rule => Rule.required(),
    }
  ]
}
In fact i need infos in my rendere which typically are exposed by mux.video 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: 'mux.video'}
to your
blockContent
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 mux.video 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 mux.video but wont change the problem that i dont get the needed attributes. See the two different ways:

body:{} 2 items

1:{} 2 items

_type:videoEmb

video:{} 2 items

_ref:d970338c-1ebb-4f88-b9b4-cec9615c7e63

_type:reference

5:{} 3 items

_key:4f7911c13b96

_type:mux.video

asset:{} 1 item

_ref:29e883f1-21bb-44ff-ab79-d84a04169c0b
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 mux.video directly inside PortableText even more than my approach. Problem is, the ref i get back with mux.video 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
thx
Aug 31, 2021, 10:07 PM
thx
Aug 31, 2021, 10:07 PM
Are you using gatsby-source-sanity?
Aug 31, 2021, 10:28 PM
yeah
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
_ref
.
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 mux.video is embedded. I see this in graphql:
{
“_key”: “d4379ae7d5dd”,
“_type”: “mux.video”,
“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 mux.video 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 mux.video 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 mux.video is kind of dead
Sep 9, 2021, 4:03 PM

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?