How to use structure builder with sanity-plugin-intl-input for organizing translated documents.

13 replies
Last updated: Feb 18, 2022
I am using sanity-plugin-intl-input and I need to use structure builder to organize my documents to be more user friendly. My issue is that whenever I attempt to follow the structure builder documentation , the translate features in the studio no longer show. The sanity-plugin-intl-input structure instructions do not seem to line up with any examples I can find. How can I add basic structure builder features to organize documents translated with sanity-plugin-intl-input ?
If transitioning to the new
document-internationalization will help, I can do that, but I did not see anything in there that addresses my specific issue.
Feb 3, 2022, 3:13 AM
Maybe this can help you? Using the new plugin.
Feb 3, 2022, 9:32 AM
Thank you for replying. That code does not seem to do anything to allow me to use a translated document with structure builder.
Feb 3, 2022, 2:21 PM
Hi User. Migrating to
document-internationalization
is probably a good idea if it's not too much trouble for you. It's being actively maintained by Sanity and Liam.

document-internationalization
does have manual implementation instructions that cover using your own custom desk structure . Does this help at all?
Feb 3, 2022, 3:11 PM
document-internationalization has the same instructions that the previous version had
The problem seems to be in this

export default () => {
  const items = Structure.getFilteredDocumentTypeListItems()
  return S.list().id('__root__').title('Content').items(items)
}
This function, Structure.getFilteredDocumentTypeListItems(), is what flattens all of the translated versions into one document in the studio. If I use anything besides Structure.getFilteredDocumentTypeListItems() in the .items() function, it no longer sees the translated documents as one document. This is an issue as the
structure-builder instructions indicate to use the .items() to customize how documents appear in the studio. How can I have the result caused by using Structure.getFilteredDocumentTypeListItems() with a custom structure?
Feb 3, 2022, 3:24 PM
Is there any chance of getting a reply about this?
Feb 8, 2022, 3:17 PM
Hi User. I'm sorry for not getting back to you on this one sooner. I'll add the Document Internationalization plugin to my test Studio and see what I'm able to do!
Feb 8, 2022, 3:30 PM
Have you had any luck with this?
Feb 10, 2022, 10:39 PM
I've taken a closer look, and although the
getFilteredDocumentTypeListItems
function is fairly closed off, I think it might be possible to map the items returned in order to customise them. Would you be able to explain the changes you'd like to make?
Feb 11, 2022, 12:03 PM
My goal is to identify certain schemas or documents that make up the high-level pages of our website and have those in one folder. We are letting a client have a login to edit content and I want to make the content easier to find. All schemas must support translation, and we like the features of document-internationalization . I am new to structure builder, but I think all I need to do is identify the documents that make up our website pages using the documentList() function.
Feb 11, 2022, 3:39 PM
Is there any more information you need to understand the issue I am encountering?
Feb 16, 2022, 2:25 PM
Hi User. I'm really sorry, we've been quite busy and I hadn't had a chance to take a close look at your document structure question. I think I've achieved something similar to what you need. I've commented the code, but please let me know if you have any questions.
Does this screenshot show a structure that reflects your needs? I have taken the
page
document type (which supports translation), and added it to a new list named "Group A". You could group multiple document types into different groups using this technique.

import S from '@sanity/desk-tool/structure-builder'
import * as Structure from '@sanity/document-internationalization/lib/structure'

export default () => {
  // Get the filtered document type list items from `document-internationalization`.
  const items = Structure.getFilteredDocumentTypeListItems()

  // Group the items into a `main` group and a `groupA` group. The `groupA` group
  // will be nested in a new list item named "Group A".
  const groupedItems = items.reduce(
    (reduced, item) => {
      // Check whether the item should be included in `groupA`.
      if (item.id === 'page') {
        return {
          ...reduced,
          groupA: [...reduced.groupA, item],
        }
      }

      // If the item should not be included in `groupA`, add it to the `main`
      // group.
      return {
        ...reduced,
        main: [...reduced.main, item],
      }
    },
    {
      main: [],
      groupA: [],
    },
  )

  return S.list()
    .id('main')
    .title('Content')
    .items([
      // Include the `main` group.
      ...groupedItems.main,
      S.divider(),
      // Include the `groupA` group in a nested list.
      S.listItem()
        .title('Group A')
        .child(
          S.list().id('groupA').title('Group A').items(groupedItems.groupA),
        ),
    ])
}
Feb 17, 2022, 2:58 PM
I believe that is exactly what I am looking for. I will give it a shot. Thank you.
Feb 18, 2022, 7:04 AM
Fab! Let us know how it goes! πŸ™‚
Feb 18, 2022, 9:26 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.

Was this answer helpful?