Global component that itself references stories from a folder


I’m currently hitting a concrete wall trying to model a rather simple (and i would guess common) use case.

I need a component that must be reusable across multiple pages, used as Block as well as Single/Multi-Option refs.

Apart from a title and a description (both text type fields), this component needs to have a list of links to stories in a specific folder (so, probably a Multi-Option type field). So, title, description, a bunch of links. Easy peasy, right?

I’m trying to get this to work for two days now, no luck. The closest i got to it was following this article but i can’t get the stories referenced via the Multi-Option resolved, no matter what. I get the title, the description, and an array of UUIDs.

Anyone has ever done this kind of thing?

1 Like

Hi, yeah you are correct. This is pretty common use case and I think you are/were pretty close to solve it. All you should need to do is to resolve_relations - there is a topic about it in documentation -

If you check the sample the categories are resolved instead of them to be only IDs.

I do resolve relationships (and that works in other places in my app). But it seems that either StoryBlok doesn’t support resolving nested relationships, or i do something wrong.

The docs say “Resolve relationships to other Stories (in the first level of nesting)”, should that give me a hint?

Yes, you are correct only the first level is supported. So if you have a relation in resolved relation - that will be not resolved.

1 Like

Ah ok, well that’s unfortunate.
Well i have a feasible workaround in my case, so i can live with it.

You can propose it as new feature, if you want - honestly I don’t know why it is implemented this way - my guess is performance. But if you really miss it, feel free to ask for it here and you will get better answer and there is always a chance we will implement it.

I have been working on this as well. What is the feasible work around that you have found.
I have tried quite a few different solutions but not found one that work across the root and directories across my set up.

This is not possible to implement due to technical reasons right now -

It’s quite a hack, but it works for me:

For all pages that use my global component, i pull in the collection i need in parallel. I’m using GraphQL so i can do that in one single request, but the ugly is of course that i need to know which pages need that extra data. But well… i can live with that.

If you don’t mind two requests you could also figure out which stories you need resolved and pull them manually via uuid in a second request.

1 Like

Ok, thanks. That is messy, but I will see how this goes.