Reference field on a "repeat for each" symbol

Bugs
1

I’m trying to repeat a symbol given an array of results from my Builder data connector.

The symbol has a content input field with type reference, the name is projectRef.

I want to construct the reference programmatically using a data binding, including the id from each of the items from data connector response. My expectation is that, if successful, the symbol will have access either to the reference or the inlined content pointed to the reference in state.projectRef.

I’ve tried three approaches for the data bindings and none of them work:

  1. IIFE: I bound projectRef to an IIFE that constructs the reference object to match the shape that I’ve seen in Builder JSON:
(() => ({
    "@type": "@builder.io/core:Reference",
    id: state.resultsItem.id,
    model: "project"
}))()

Result: state.projectRef is undefined.

  1. state.resultsItem.id: Noticing that my IIFE got transpiled to state.resultsItem.id in my content JSON, I simply replaced the IIFE in my data binding with state.resultsItem.id.

Result: state.projectRef is undefined.

  1. Manually overriding the JSON: I manually overrode the transpiled JS code for the reference, forcing it to return a reference object. Here’s an example of what my JSON for the symbol block looks like:
"bindings": {
   ...
    "component.options.symbol.data.projectRef": "var _virtual_index={id: state.resultsItem.id,\"@type\":\"@builder.io/core:Reference\",model:\"project\"};return _virtual_index"
  },

Result: state.projectRef is {"@type":"@builder.io/core:Reference","model":"project"} (note: no id property).

Builder content link
https://builder.io/content/c96028e08b6e42a1a5dc9d7c370a74fb

Builder public api key
c55d858f6bac43358e501f85f3367d2e

Detailed steps to reproduce the bug

  1. Spin up a dev server from here (ersin/repeat-symbol-reference-field branch): GitHub - ersinakinci/builder-repro-react at ersin/repeat-symbol-reference-field
  2. Visit http://localhost:3000/projects-state-resultsItem-id, http://localhost:3000/projects-state-resultsItem-id, or http://localhost:3000/projects-manually-configured-json
  3. Observe that Project ref (state.projectRef): _____ text on either of the project cards doesn’t update with the ref that’s passed in from the projects page.

Screenshots or video link

Code stack you are integrating Builder with
Next.js

Reproducible code example

Other notes
I’ve set includeRefs: true and noTraverse: false in my content API options, but neither seem to have any effect: builder-repro-react/[[...page]].tsx at ersin/repeat-symbol-reference-field · ersinakinci/builder-repro-react · GitHub

2

Alright, I figured out what I was doing wrong. Turns out, I had assumed that the data connector would return the id, but in fact, it doesn’t. So to do what I want, I needed to manually fetch the content on the back end using builder.getAll, which does return the id.

Once I fixed this issue, I was able to construct my ref.

Unfortunately, the ref doesn’t actually do anything because, as I’ve learned, refs are only auto-resolved by the content API. My bindings create refs programmatically inside the React SDK after the content API call, meaning that I’ll need some kind of custom JS inside the symbol to resolve the ref manually. But even if I did that, it would only be able to execute browser-side since custom JS never executes during SSR.

Looks like I’ll have to modify my bindings to pass project data directly to the symbol rather than relying on a reference. Kinda inelegant, but I guess that’s the only option if I want SSR.