运行关于属性变化的查询

Question

我对 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，但似乎不正确

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

运行关于属性变化的查询

Running a query on property change

javascript

svelte

svelte-component

运行 关于 属性 变化的查询

Running a query on property change

javascript

svelte

svelte-component

运行关于属性变化的查询