Next.js Problems with Visual Bridge in Real Time

Questions
#1

Hello,
I have some problems with setting of Visual Bridge in real time and I came to you with 2 questions.

  1. In all your tutorials and articles you used window.storyblok.resolveRelations with hardcoded values of resolve_relations. Is there any option to get resolve_relations values from SB and dynamically put it to resolveRelations method? Configuration of Visual Bridge is global for the whole application and I don’t see an opportunity to put all necessary values in a hardcoded way.

  2. I was able to set Visual Bridge in Real time but only for the main page. I tried to set it on nested components in many ways but without success. Is it possible in StoryBlok to set it on nested components?
    Below I put part of my structure

Page with Component 1
↓
Component 1

texf field
multi-option content type Component 2

↓
Component 2

text field
Component 3 block of custom content
Component 4 block of custom content

Unfortunately, the structure seems slightly unreadable. I hope you can understand my problem.

Regards,
Kate

#2

Hello Kate,

To 1. As far as I know, there is no way to automatically determine the relations to resolve at the moment.

To 2. For being able to give you more information I need to know the framework that you’re using.

Best regards
Hannes

#4

Hello Hannes,
Thanks for quick response. I’m using Next.js.

Ad 1. If it’s not possible to dynamically resolve relations, what should I put in the storyblok-service file? Whole list of strings of every possible od relasion? some of those can have nested paths…

Regards,
Kate

#5

Hi Kate,

  1. Resolving Relations:
    You can resolve relations in both the Storyblok Bridge and the Storyblok Client through the API (See Storyblok API Documentation).

The resolving of deeply nested relationship is unfortunately not possible due to performance constraints. So if you want to resolve the relation of a resolved relation, you will have to make another request with the ids. See Using relationship resolving to include other content entries - Storyblok

The resolve_relations won’t work on the already resolved entry, so to load categories and author you would need to send another request and extend your content asynchronously.

  1. Visual Bridge on nested components:

It should be possible to set the Visual Bridge to make any component editable. In order to make a component editable in Next.js you need to wrap it in a SbEditable component and pass it the component data. See: GitHub - storyblok/storyblok-react: React component for storyblok , The Complete Guide to Build a Full Blown Multilanguage Website with Next.js - Storyblok

I hope this answers your question. Best Regards,
Lisi