javascript - 运行关于属性更改的查询

Question

我对苗条很陌生，还没有完全了解绑定和更新。

我的组件应该在每次jobId属性更改时查询服务器，但我似乎无法弄清楚如何。

<script>
    import StatusItem from './StatusItem.svelte';
    import { getClient, query } from 'svelte-apollo';
    import { client, JOBDETAIL } from '../data';

    export let jobId;

    let steps = query(client, { query: JOBDETAIL, variables: { id: jobId } })
</script>

<div class="steps">
    {jobId}
        {#await $steps}
            Loading...
        {:then result}
            {#each result.data.history[0].details as step}
                <StatusItem title={step.step} subtitle={step.time} status={step.status}/>
            {/each}
        {/await}
</div>

问题是它当然不会在更改query时调用该函数jobId，我明白为什么它没有。但我不知道如何解决它。我尝试使用beforeUpdate，但这似乎不对

Answer 1

您可以使用响应式语句来做到这一点

<script>
    import StatusItem from './StatusItem.svelte';
    import { getClient, query } from 'svelte-apollo';
    import { client, JOBDETAIL } from '../data';

    export let jobId;

    $: steps = query(client, { query: JOBDETAIL, variables: { id: jobId } })
</script>

<div class="steps">
    {jobId}
        {#await $steps}
            Loading...
        {:then result}
            {#each result.data.history[0].details as step}
                <StatusItem title={step.step} subtitle={step.time} status={step.status}/>
            {/each}
        {/await}
</div>