Join the Webstudio community

Updated 4 months ago

Using JS to filter GraphQL results in Expression Editor

At a glance

The community member has pulled in a set of collections from their Shopify store using the Storefront API, and they have a metafield data that is either true or false. They want to display only the collections that have the metafield set to true. The community members suggest that if the filtering cannot be done via the API request, the community member can bind an expression to the Collection children and check for the condition to show or hide the collections conditionally.

Another community member is trying to create a multi-step product builder, where the user selects an initial collection, and then they want to fetch the products from the selected collection. The community members suggest that if the community member doesn't need to server-render the lists, they can fetch the data from the client and do whatever they want with it. They also mention that the WebStudio resource allows fetching on the server and server-rendering the result, but the community member seems to be building a client-side app and may not need this feature. The community members suggest that the community member can probably achieve this using resources, forms, and expressions while keeping server-side rendering.

Useful resources
Hey there I have pulled in a set of collections from my shopify store using the storefront api's. In the result I have a metafield data that is either true or false. I only want to display the ones that are set to true in my collection. How can I achieve this?
J
a
O
7 comments
If you can't filter it via the API request, then you can bind an expression to the Collection children and check for that condition and show / hide conditionally https://docs.webstudio.is/university/foundations/expression-editor#expressions
I'm trying to create a multistep product builder. I was hoping to make it so that they select an initial collection that collection has a set of products in it that they then choose from.

I want to fetch that collection of proucts base on the initial selection. When it loads I get the initial return of all the shopify collections that I'm displaying. When the user clicks one of the initial collections I want to update a variable so that we can do a new api call to get the products from the selected collection....is this something that is possible in web studio?
if you don't need to server-render those lists, you can fetch data from the client and do with it whatever you want
webstudio resource allows you to fetch on the server a and server-render the result
you seem to be building a client-side app and don't need this feature
but generally you can probably make this with just using resources, forms and expressions and keep server-side rendering
Add a reply
Sign up and join the conversation on Discord