Use state parameter inside custom query of Connect Data binding to model?

[wsaunders]

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
Symbol:

Builder.io: Visual Development Platform

Offer page:

Builder.io: Visual Development Platform

**
Builder public api key**
86c4a31f0077496096f43ee97dca3ae3

What are you trying to accomplish
*Okay this is kind of complicated. So bear with me.

Currently, we have a list of symbols with product names that we use on our offer page. We use dynamic symbol function to pull the correct Product name by targeting the symbol with a query parameter. Example: /offers?offerId=p90x will load the Offers page and the heading will say “Get P90x” etc. So we have dozens of products which means we have dozens of symbols. Everytime we add a product, we add a symbol. Seems tedious and unnecessary.

I have a heading symbol that has a content input of “Offer ID”, this should look up the entry of the Offer Heading model that corresponds. On the offer page itself I am using custom code to fill the content input with the offer id from the query parameter:*

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const hasOfferId = urlParams.has('offerId');
const offerId = (hasOfferId) ? urlParams.get('offerId'):false;

Seems like it’s working. However the issue I’m having is on the connect data tab:

I need this to be dynamic based on the content input of the symbol. So something like state.offerId. This would select the right entry from the Structured Data Model “Offer Headings” but it doesn’t seem to accept anything but plain text of the exact thing you want. When I try a custom query, it gives an error about “value expected (json 516):

Code stack you are integrating Builder with
NextJS, react, Shopify

[manish-sharma]

Hello @wsaunders,

Using dynamic variables in a custom query within Builder.io is not supported, so expressions like state.offerId cannot be used directly in the Connect Data tab to filter structured data.

To achieve dynamic filtering, you have two options:

1. Use JavaScript inside your symbol or page to fetch and filter data dynamically. You can implement this using Builder.io’s Custom Code documentation, which explains how to run JS code within symbols or pages to manipulate content dynamically.
2. Filter the data at the codebase level before passing it to your Builder page. You can fetch the relevant entries in your frontend or backend code and then pass them to Builder as props or state. Examples for this pattern are shown in the Code Data documentation.

Additionally, if you need to trigger dynamic actions based on the data or user interaction, you can leverage Custom Actions, which allow you to run JavaScript in response to events and manipulate content dynamically.

The definitive guide to building a drag and drop editable blog with Builder

Thanks,