Expanding body in Groq selector breaks ability to do source mapping

[rijk]

In my custom components, I use encodeDataAttribute to map them to blocks. For example:

<div data-sentry={encodeDataAttribute(['body', _key, 'image', 'image'])}>
   <img ... />
</div>

This works, as long as the Groq query is simple, like:

*[_type == "page" && slug.current == $slug][0]

As soon as the query gets more complex (which is needed to expand references), the encodeDataAttribute breaks:

*[_type == "page" && slug.current == $slug][0]{...} // still works…
*[_type == "page" && slug.current == $slug][0]{..., body} // still works…
*[_type == "page" && slug.current == $slug][0]{..., body[] {...}} // from here, it breaks

Even though nothing actually changes in the document structure returned by the query (I've diffed the two JSON objects and they are identical).

Which versions of Sanity are you using?

% sanity versions
@sanity/cli (global)        3.25.0 (latest: 3.26.0)
@sanity/image-url            1.0.2 (up to date)
@sanity/overlays             2.3.7 (up to date)
@sanity/preview-url-secret   1.5.2 (latest: 1.5.3)
@sanity/react-loader         1.7.6 (up to date)

What operating system are you using?

macOS

Which versions of Node.js / npm are you running?

% npm -v
10.2.3
% node -v
v18.19.0

[rijk]

The problem is in the difference in sourceMap I think.

Simple query

sourceMap for simple query (*[_type == "page" && slug.current == $slug][0]{..., body}):

---

Expanded query

sourceMap for expanded query (*[_type == "page" && slug.current == $slug][0]{..., body[]{...}}):

One could argue if mapping all the paths for each block is necessary/a good thing, but most importantly what is lost here is this mapping:

[rijk]

I've worked around it for now by overwriting the mappings and paths — no idea if this is ill advised, but it seems to work:

const { data, sourceMap } = useQuery<Page | null>(PAGE_QUERY, params, { initial })
const encodeDataAttribute = useEncodeDataAttribute(
  data,
  {
    documents: sourceMap?.documents ?? [],
    // Overwrite the mappings because they break visual editing when you start expanding the body
    // array (see https://github.com/sanity-io/visual-editing/issues/747)
    mappings: {
      $: {
        source: { document: 0, path: 0, type: 'documentValue' },
        type: 'value',
      },
    },
    paths: ['$'],
  },
  client.config().stega.studioUrl
)