GraphQL - Is there a Way to Get the Image Metadata From an Image Component?

10 replies

Last updated: Oct 29, 2021

Using GraphQL is there a way to get the Image metadata from an image component used inside the

block

type?

Oct 28, 2021, 5:44 PM

The schema generator will expose a

<your-type-name>Raw

field for your Portable Text, but in order to resolve references you need to use one of our source plugins for Gatsby or Gridsome .

Oct 28, 2021, 5:53 PM

For example, Gatsby source allows you to do the following:

{
  allSanityProject {
    edges {
      node {
        _rawTasks(resolveReferences: {maxDepth: 5})
      }
    }
  }
}

Oct 28, 2021, 5:53 PM

I have the basic

Raw

field, I'm using

Apollo

with

nextjs

. Previously i've looked into the

_raw

field but couldn't figure out how to use it in this stack.

Oct 28, 2021, 5:54 PM

Got it. You unfortunately can't pass the

resolveReferences

argument unless you're using one of those source plugins.

Oct 28, 2021, 5:55 PM

So the answer my initial question in the context of my stack (sorry i should have said it in the ticket), it's a no? 😓

Oct 28, 2021, 5:56 PM

Yeah, it's a no 😞 . But since you're using a Next frontend, have you considered making a change over to using GROQ as your query language? It has a much more intuitive way of handling references within Portable Text.

Oct 28, 2021, 5:58 PM

yeah in hindsite it would be better to do this. Are you able to create chunks of a GROQ call and stitch them? i.e one for each CMS module (we have a modular CMS)

Oct 28, 2021, 6:46 PM

GROQ queries are strings. You can concatenate them or use template literals with string interpolation. for example: https://gist.github.com/mornir/4905c0d9adaa8612d797f8e054764087

Oct 28, 2021, 6:52 PM

Yeah, the great thing about GROQ is that you can stitch information together across any document in your dataset. There's a really good intro here . It's only simple examples, but it'll give you a look at how powerful it is.

Oct 28, 2021, 8:52 PM

Thanks folks!

Oct 29, 2021, 8:43 AM

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.

Get started for free Explore the demo

GraphQL - Is there a Way to Get the Image Metadata From an Image Component?

Sanity– build remarkable experiences at scale

Was this answer helpful?