How do/can I access content Inputs in an isServer code block?

Visual Editor Help
,
1

Builder content link

Builder public api key
5f12d16ca07c4964a34dfba2845f3426

What are you trying to accomplish
I have an external API that provides product data. I want to create a product card symbol that has a product ID/sku as an input, use that input to hit the API, and during SSR set that data as state variables for populating the component.

I can do this using a hard-coded sku, but when I try to use string interpolation to access the input variable ‘productid’ I can only ever get ‘undefined’. In client-side code it is accessible as ‘state.productId’, but this doesn’t seem to work in an ‘isServer’ block.

Note, I am using the web components API to load my Builder.io content client-side and do not have access to our site’s server-side code. That is why I am trying to do this using the custom code section in the Builder editor.

Here is the code I have:

async function main () {
  if (Builder.isServer) {
    fetch(`https://acquire-products-api.vercel.app/api/product/${state.productId}`)
      .then(res => res.json())
      .then(data => state.productApiData = data)
  }
}

export default main();

So my question is, can I access the content’s input variables in this server-side code, and if so, how?

For bonus points, how do I get it to work in preview rather than just on published content?

2

Hi, @geoff.talbot Welcome to Builder.io Forum. Thanks for this question!

Response 1#: You can access content input on the server side by accessing the state. Currently, it looks like we have a potential bug around the access state server side and we have created a Jira ticket(ENG-3072) for our dev team to take a closer look into this. We surely keep you updated on this.

Response 2#: You can preview content in the Visual Editor, but you won’t be able to view the draft until your Builder space is integrated properly with your site or app. For more information on how to integrate with your site, please check the documentation below:

Let us know if you have further questions!

3

Thank you @garima :smile:

It’s nice to know I was on the right track. Is there a way to get notified when this issue is resolved?

With regards to the second response:

Our site is integrated using the web component API, and I can preview content in the Visual Editor. However, any state variables that I set in my ‘isServer’ code are not showing up in the state inspector in the Visual Editor and are not accessible by components in the preview. On published content viewed on our site the variables are available and can be accessed by components. Is that because of the same issue or is there something else going on there?

Here’s a simple example:

if (Builder.isServer) {
  state.helloWorld= "Hello World"
}

I then create a Text component, bind its Text property to ‘state.helloWorld’ and Publish the content.

In the Visual Editor preview the text displayed is ‘undefined’, while on the live site the text displayed is ‘Hello World’.

I can work around this by changing ‘if (Builder.isServer)’ to ‘if (Builder.isServer || Builder.isEditing)’. Is that the intended solution or should my server side code be running and updating the state object in preview as well?

4

Hey @geoff.talbot, Thanks for getting back to us!

  1. We had attach a Jira ticket with your query and keep you updated.
  2. Yes, this is because of the same issue. We are able to reproduce that the state is not accessible within if (Builder.isServer) { }
  3. Using state in if (Builder.isServer || Builder.isEditing) will make the code run both in server and client-side.

Let us know if you have further concerns!