Join the Webstudio community

Updated 7 months ago

set variable with script

At a glance

The community member is trying to extract data from a GraphQL variable and use it in another block. Specifically, they want to get all unique categories from some formations and use them in a collection. They have tried different approaches, such as binding objects in HTML embed, but encountered issues. Another community member suggests using backticks and ${} to bind data to custom HTML embed, and that the upcoming release will automatically stringify objects so they can be bound to HTML.

The community members discuss various use cases, such as getting all unique post categories in a single query, extracting sticky posts, and limiting the number of displayed blog posts. They share GraphQL query examples and discuss the best approaches to achieve these goals.

Hi !
I want to extract data from a graphql variable and use it in an other block.

I have some formations with categories.
I want to get all unique categories as an array in order to use it in a collection.

I 've tried different ways but :
Binding objects in html embed doesn't seem to work (capture 2)
I don't know a to use custom script variable in expression editor (capture 3)
Attachments
Capture_decran_2024-07-11_a_14.41.02.png
Capture_decran_2024-07-11_a_14.47.48.png
Capture_decran_2024-07-11_a_14.37.07.png
M
J
9 comments
Is it possible with webstudio ? thanks 🙏
not sure exactly what your goal is but several things.

  1. you can bind data to custom html embed. Make sure you use backticks around the entire thing and ${} to surround your var. Look at my screenshot for reference
  1. You can go from Variables -> Code but not the other way around.
  1. You can bind results to a data attribute like data-my-info and make it accessible for code as well
Attachment
Screenshot_2024-07-26_at_5.21.30_PM.png
Hi @John Siciliano Thanks for your answer.
There's no problem to bind date, string, number… to custom html embed.
But when I try to bind an array or an object, it returns [object Object]
In that case, I want to get all uniques posts categories, to make an array.
Currently, I can achieve with two queries, but it would be better performances if I can get posts and posts categories with one same query.
Oh this is actually getting released very soon. It's already done and will be included in the next release probs this week is my guess. It will automatically stringify the object so you can bind it to html and then work with it there.
@Matthieu can you describe your use case in detail? I need to create some content when we release this but want to use a real use case
Hi @John Siciliano ! I share you my use cases.
in attachment, please find the json file from graphql. The query returns the Formations Archive page and its content node.
I want to use this variable in a script in order to create an array with all distincts formationCategories from content node.
Here a second use case. the query returns blog posts.
I want to use this variable in two scripts
• first, extract sticky post to bind in an specific collection
• second, get all other post to use it in collection AND limit the number of display posts. this limit is incremented by a load more action which sets an url params (?limit=3, 6, 9, etc.)
thanks for taking the time to put this together!
Add a reply
Sign up and join the conversation on Discord