对属性更改运行查询

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>