Easy method to display all documents with references to a certain document.

3 replies
Last updated: Nov 23, 2023
Hi everyone! Is there any easy method how I can display all the documents that have references to certain document? E.g. I have widgets as a separate document, and pages can have widgets attached as references. I want to see on the widget edit view the list of pages that use certain widget
AI Update

Yes! There's a great way to display documents that reference a specific document in Sanity Studio. Sanity's Content Lake indexes references bi-directionally, which means you can query "incoming references" - documents that contain references to the current document.

The Easy Method: Documents Pane Plugin

The simplest approach is to use the Documents Pane plugin. This plugin lets you display GROQ query results directly in your Studio's view pane, which is perfect for showing which pages use a specific widget.

Installation

sanity install documents-pane

Setup

In your Structure Builder configuration (typically deskStructure.js), add this to your widget document views:

import DocumentsPane from 'sanity-plugin-documents-pane'

S.view
  .component(DocumentsPane)
  .options({
    query: `*[!(_id in path("drafts.**")) && references($id)]`,
    params: { id: `_id` },
    useDraft: false
  })
  .title('Referenced By')

This configuration:

  • query: Finds all documents (excluding drafts) that reference the current document's ID
  • params: Passes the current document's _id as a parameter
  • useDraft: Set to false to only show published documents

When editors open a widget in Studio, they'll see a "Referenced By" tab showing all the pages that use that widget. They can click through to those pages directly from the widget's edit view.

How It Works

As explained in the Connected Content docs, references in Sanity are always bi-directional. When a page references a widget, the Content Lake automatically indexes this relationship in both directions. This means you can query:

  • From the page to find what widgets it uses
  • From the widget to find what pages reference it (incoming references)

Alternative: Custom GROQ Query

If you need more control or want to display this information elsewhere, you can use the references() function in GROQ directly:

*[_type == "page" && references("widget-id-here")]

The Documents Pane plugin is the easiest solution since it provides a ready-made UI component that integrates seamlessly into your Studio's document editing experience. It's exactly designed for this "show me what references this" use case!

The Documents Pane plugin uses this (reverse references) as its readme example. It will be a separate view, but will exist on the documents you specify.
user A
awesome, thank you! that's exactly what I was looking for!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?