Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

Discussion on using StructureBuilder and getting document types with icons in Sanity v3.

20 replies
Last updated: Jun 10, 2023
Hey everyone, I have been having issues with migrating a v2 edit content widget, it seems that the tool was using the desk tool structureBuilder and getting the icons from a list

import StructureBuilder from '@sanity/desk-tool/structure-builder';

export function getDefaultStructure() {
  const items = StructureBuilder.documentTypeListItems();
  return StructureBuilder.list()
    .id('__root__')
    .title('Content')
    .showIcons(items.some((item) => item.getSchemaType().icon))
    .items(items);
}
which later is used as in a React component file

{getDefaultStructure().items
          .filter((item) => item.type !== 'divider')
          .map((item) => {
            const Icon = getIconComponent(item);
            return (
              <div key={item.id}>
                <Link
                  className={styles.link}
                  href={`/${getEnvironmentName()}/desk/${item.id}`}>
                  <div className={styles.iconWrapper}>
                    <Icon />
                  </div>
                  <div>{item.title}</div>
                </Link>
              </div>
            );
          })}
Okay since there seems to be no way to access the StructureBuilder, which now seems only to exist inside the deskTool plugin, is there a way to retrieve it and use it in widgets? Or is there a GROQ query to get the different available document types used in sanity desk, with their respective icons. Thanks in advance.
Jun 10, 2023, 12:26 PM
I’m afraid I can’t reproduce the v2 example you’ve provided to get a sense of what you’re expecting. Can you please provide some code that minimally reproduces what you’re after? Thanks!
Jun 10, 2023, 3:02 PM
Hey Geoff, thanks for getting back to me, basically I'm trying to get a similar widget for v3 on the dashboard
Jun 10, 2023, 3:25 PM
That's the finished widget, basically it uses StructureBuilder to get the different desk document types with their icons
Jun 10, 2023, 3:27 PM
I have seen something along the lines of createStructureBuilder but no documentation on how to use it
Jun 10, 2023, 3:28 PM
If you need more info I can zip the custom current plugin as is
Jun 10, 2023, 3:29 PM
Or if there is any example I'll be glad to take a look
Jun 10, 2023, 3:30 PM
Again thanks for your response
Jun 10, 2023, 3:31 PM
Okay an update I have been able to get all schema document types using useSchema, can I ask for v3 is there a new Link component
Jun 10, 2023, 3:49 PM
So I have disregarded using StructureBuilder
Jun 10, 2023, 3:50 PM
Great! Glad you’re on your way to a solution here.

I don’t believe
Link
is a component coming from the Studio. Could you check your v2 instance and see where it was imported from or defined?

Edit: Never mind. It’s defined by the Sanity Router.
Jun 10, 2023, 3:56 PM
It looks like
Link
remains the same in v3, though it may be imported differently than it was in v2. The component comes from the same location .
Jun 10, 2023, 3:59 PM
Okay thanks if this works out I'll publish a plugin for everyone, can I ask why is rxjs used in most Sanity plugins been looking through a lot of source code
Jun 10, 2023, 4:08 PM
And one last question is there a way to get the current location or base url of sanity or that is tied to useClient
Jun 10, 2023, 4:12 PM
RxJS Observables fill a gap that doesn’t yet exist in JavaScript. In the Studio context, they’re often quite valuable. As someone who doesn’t write plugins, I can’t really offer too good of a reason, but we make use of them throughout the Studio codebase, as well.
Jun 10, 2023, 4:13 PM
is there a way to get the current location or base url of sanity or that is tied to useClient
If you want the URL that the client is sourcing from, that’s available on
client.config()
.
If you want the current hostname where the client is being used, I’m not sure what best practice is but I believe I’ve commonly seen it inferred from
window
.
Jun 10, 2023, 4:27 PM
okay thanks geoff let me work on this regards
Jun 10, 2023, 4:34 PM
Hey Geoff, I'm getting the api url instead of the current location I'm using window.location.href is there a cleaner way?
Jun 10, 2023, 5:20 PM
Okay I'm looking at sanity withRouter component
Jun 10, 2023, 5:33 PM
I was hoping the with router exposes location history and all on the props so far no success
Jun 10, 2023, 5:41 PM
Found a work around sorry this is how do my thinking 🤣🤣🤣
Jun 10, 2023, 5:46 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?