运行关于属性更改的查询答案

【问题标题】：Running a query on property change运行关于属性更改的查询
【发布时间】：2019-08-09 20:17:10
【问题描述】：

我对 svelte 很陌生，还没有完全理解绑定和更新。

我的组件应该在每次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>

问题在于，当jobId 发生变化时，它当然不会调用query 函数，我知道为什么它不会。但我不知道如何解决它。我尝试使用beforeUpdate，但这似乎不对

【问题讨论】：

标签： javascript svelte svelte-component

【解决方案1】：

你可以使用reactive statements来做到这一点

<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>

【讨论】：