苗条：Promise {<pending> 无法读取未定义的属性“边缘”</pending>

Question

Hello someone know why i have this error please?

Promise { } Cannot read property 'edges' of undefined

<script>
    import { getProduct } from '../lib/store';
    const productId = 'a';
    
    const product =   getProduct(productId);
    $: console.log(product);

    let quantity = 0;
    let price = 0;
    let total = 0;
    $: quantity = quantity < 1 ? 1 : quantity;

    $: options = product.variants.edges.map((items) => {
        let list = {};
        list.id = items.node.id;
        list.color = items.node.selectedOptions[0].value;
        list.size = items.node.selectedOptions[1].value;
        list.price = items.node.priceV2.amount;
        return list;
    });

    $: console.log(options);
</script>

Datas comes from Shopify API Thank you!

Answer 1

You are awaiting a promise from the getProduct call, so you need a place for the results of that promise to land, and then you can use them. You are seeing the error because you are trying to access the property variants of a promise, which doesn't exist, so JS give back undefined as would be expected. Then you try to access edges of undefined and get the error.

One way you can fix this is to do the following:

1. Expose product as a mutable variable, and set initial value to null:

let product = null;

2. import the onMount method from svelte, and you can use it to run an async method, and await the promise for getProducts, then assign it to the product variable:

import { onMount } from 'svelte'

.....

onMount(async () => {
  products = await getProduct(id);
});

3. Set up your reactive variables to conditionally use product if it's not null:

$:options = product ?  product.variants.edges.map((items) => {
        let list = {};
        list.id = items.node.id;
        list.color = items.node.selectedOptions[0].value;
        list.size = items.node.selectedOptions[1].value;
        list.price = items.node.priceV2.amount;
        return list;
    }) : null;

4. Only render markup that relies on options if it's present.

{#if options}
  /* Markup here dependent on options */
{/if}

Now the reactive options variable will update automatically when product is reassigned from onMount , and data and rendering will flow accordingly.

You could possibly use optional chaining instead of the ternary operator that I used, however until product is reassigned, options would be undefined instead of null. It's up to you on which to use and both ways will work, but I like to be more explicit with null instead of trusting the compiler to come up with the undefined value.