如何在Svelte中实现jobId属性变更时自动触发服务器查询？

我完全懂你现在的困扰——当jobId属性更新时，你的Apollo查询没自动重新发起对吧？这是因为你当前的query调用只在组件初始化时执行了一次，Svelte不会自动追踪普通变量的依赖变化。

下面是最贴合Svelte响应式机制的解决方案：

使用Svelte响应式声明（$:） #

Svelte的$:标记能让语句变成响应式语句，当它依赖的变量（这里就是jobId）发生变化时，该语句会自动重新执行。你只需要把steps的初始化改成响应式声明就行：

修改后的完整代码：

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

export let jobId;

// 用$:标记，让query在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>

为什么这样有效？ #

• 原来的代码里，steps = query(...)只在组件第一次挂载时运行一次，之后哪怕jobId变了，这条语句也不会再执行。
• 加上$:后，Svelte会自动监听jobId这个依赖，每当jobId更新，就会重新调用query函数，传入新的jobId作为变量，自然就能发起新的服务器查询了。

额外小提示 #

如果需要在查询前做一些校验（比如判断jobId是否为空），也可以把逻辑放在响应式语句里：

$: if (jobId) {
  steps = query(client, { query: JOBDETAIL, variables: { id: jobId } })
}

这样能避免jobId为空时发起无效查询。

内容的提问来源于stack exchange，提问作者munHunger