✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Querying Mux video data in Sanity project with React frontend.

9 replies
Last updated: Sep 11, 2021
I am currently trying to integrate Mux video playback in my Sanity project with a plain react FE.
I am using the 'mux-input' plugin for uploading integration in the studio and that works perfect.
🙂
i want to use the 'sanity-mux-player' for showing the videos on client side, and i have been following this guide :
https://www.sanity.io/blog/first-class-responsive-video-support-with-the-new-mux-plugin
But when i try and query with the GROQ example i only get a _ref in the video asset. According to the guide i should be getting a lot more data.

I have also tried to query everything on the video type and i still don't get anymore data back.

What is the correct GROQ query?

Any help or tips on how to query the data with GROQ correctly would be greatly appreciated Thanks.
🙂
Sep 11, 2021, 3:49 PM
Hi Rune. It sounds like you might need to add the dereference operator (
->
). If you’d like, feel free to paste your GROQ query and we can take a look.
Sep 11, 2021, 3:57 PM
Hi Geoff,
Thanks for the swift reply
🙂
heres my GROQ query:


*[_type == "video"]{
...,
text[]{
...,
_type == "muxVideo" => {
...,
asset -> {
...,

"url": "
https://stream.mux.com/ " + playbackId }
}
}
}
Sep 11, 2021, 3:58 PM
Thanks for that. Are you getting the
_ref
on
asset
? What does this give you?

*[_type == "video"]{
  ...,
  text[]{
  	...,
	  _type == "muxVideo" => {
  		...,
	}
}
Sep 11, 2021, 4:07 PM
Yes i am getting the _ref on asset.
i get this response:


[
{
"_createdAt": "2021-09-11T15
:10:36Z", "_id": "799b8aca-df7b-4c24-8463-0cd3c7a73e6d",
"_rev": "xZsaDmmUWhmXMRp153zWbH",
"_type": "video",
"_updatedAt": "2021-09-11T15
:10:36Z", "title": "video test",
"video": {
"asset": {
"_ref": "25ec7227-83bf-4ae0-80e2-d6e97683d57e"
}
}
}
]
Sep 11, 2021, 4:10 PM
The example code from that guide uses the video inside of a portable text editor, which is what that
text[]
bit is about. Could you try this?

*[_type == "video"]{
  ...,
  'video': video.asset->
}
There are other ways you could write this to get additional details back, but this should resolve the reference. Edit: Actually, it doesn’t look like there’s anything you’re missing on
video
, so this should be sufficient.
Sep 11, 2021, 4:15 PM
The example code from that guide uses the video inside of a portable text editor, which is what that
text[]
bit is about. Could you try this?

*[_type == "video"]{
  ...,
  'video': video.asset->
}
There are other ways you could write this to get additional details back, but this should resolve the reference.
Sep 11, 2021, 4:15 PM
ah ok i totally missed that.
The query you just gave me works perfectly
🙂 🚀
Sep 11, 2021, 4:17 PM
Thanks for your help 🙌
Sep 11, 2021, 4:18 PM
Great! Glad that’s working. Have fun building! 🙂
Sep 11, 2021, 4:18 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?