SolidJS•4mo ago

How to use a resource in a structure field as a reactive signal?

I am having serious skill issues and starting to lose my mind a bit. Maybe someone has ideas how to make price reactive? For now as far as I understand price field is created with NaN values because in the beginning of a page load I suppose the fetch is not yet executed because everything is async.

    const [productTitlePrice] = createResource("productTitle", fetchItemPrice);
    const [testRubberPrice] = createResource("testRubber", fetchItemPrice);

    const [productDataList, setProductDataList] = createSignal([
        {
            title: "productTitle",
            price: productTitlePrice(), //is not reactive
            photos: ["ash_001.JPG", "ash_002.JPG", "Placeholder.png"],
        },
        {
            title: "testRubber",
            price: testRubberPrice(), //is not reactive
            photos: ["example_003.JPG", "example_004.JPG", "Placeholder2.png"],
        },
    ]);

    const [productTitlePrice] = createResource("productTitle", fetchItemPrice);
    const [testRubberPrice] = createResource("testRubber", fetchItemPrice);

    const [productDataList, setProductDataList] = createSignal([
        {
            title: "productTitle",
            price: productTitlePrice(), //is not reactive
            photos: ["ash_001.JPG", "ash_002.JPG", "Placeholder.png"],
        },
        {
            title: "testRubber",
            price: testRubberPrice(), //is not reactive
            photos: ["example_003.JPG", "example_004.JPG", "Placeholder2.png"],
        },
    ]);

5 Replies

hannus•4mo ago

I think you could try to createStore to create a object signal. In the object, every attribute is reactive. On the other hand, if you want to some attribute to fetch data, just create an object including the signal what you have created. For instance:

const productData = {
title: "productTitle", //  string attribute
price:productTitlePrice() // singal 
}

const productData = {
title: "productTitle", //  string attribute
price:productTitlePrice() // singal 
}

TripleSmileOP•4mo ago

isnt resource a signal itself? I suppose using resource to set value to another signal and using that in my structure would just do the same thing and would't update. Or am I missing something here?

TaQuanMinhLong•4mo ago

normally i'll just use what the server returns and render out, and that's it, single resource is enough the price is not included in the resource? and you have to get it somewhere else? if you have control over the server, consider perform this logic on the server instead, the client's job is just getting data then render

Madaxen86•4mo ago

By doing what you did, You added an initial value to the signal. While the signal is reactive - the initial value is not. So what you should do is just add the accessors of the resources without calling them Like … price:testRubberPrice, … This way you keep the reactivity of the resources signals.

TripleSmileOP•4mo ago

thank you guys! For some reason didn't think of passing accessor without their call, thanks!!!! this would probably make my life a lot easier but I had made architectural mistakes so to say and just trying to finish things up so the code is weird and reason is missing 😅

Gaming

Programming

How to use a resource in a structure field as a reactive signal?