javascript - 如何使用 es6 解构语法减少代码？

Question

我将urql与Svelte一起使用，我很高兴。

我想改进一件事，但我不知道如何改进。

很多时候我有这样的代码：

<script lang="ts">
  import { operationStore, query } from "@urql/svelte";
  import { EntertainmentPlayerDocument } from "generated/queries";

  const entertainmentPlayer = operationStore(EntertainmentPlayerDocument, { id });

  query(entertainmentPlayer);
</script>

{#if $entertainmentPlayer.fetching}
  Loading...
{:else if $entertainmentPlayer.error}
  {$entertainmentPlayer.error}
{:else}
  <Button disabled={
      $entertainmentPlayer.data.entertainmentPlayer.state == EntertainmentPlayerStateEnum.Finish ||
      $entertainmentPlayer.data.entertainmentPlayer.state == EntertainmentPlayerStateEnum.Making
    }
  >
    MyButton
  </Button>
{/if}

$entertainmentPlayer.data.entertainmentPlayer我在我的代码中使用了很多很多次。

有没有办法减少这种情况？

我尝试了这段代码：

<script lang="ts">
  import { operationStore, query } from "@urql/svelte";
  import { EntertainmentPlayerDocument } from "generated/queries";

  const {data: {entertainmentPlayer}, fetching, error} = operationStore(EntertainmentPlayerDocument,{ id });

  // query(entertainmentPlayer); HOW TO USE THIS NOW?
</script>

但正如您从代码中看到的那样，我现在不知道如何调用query(entertainmentPlayer)。

如果我使用下面的代码，我会丢失打字稿定义entertainmentPlayer：

const entertainmentPlayerStore = operationStore(EntertainmentPlayerDocument, { id });

query(entertainmentPlayerStore);

$: ({
  data: { entertainmentPlayer } = { entertainmentPlayer: {} },
  fetching,
  error
} = $entertainmentPlayerStore);

// Here `entertainmentPlayer` is no more typed.

你能帮助我吗？

Answer 1

没有什么能阻止您在代码中引入额外的变量：

<script lang="ts">
  import { operationStore, query } from "@urql/svelte";
  import { EntertainmentPlayerDocument } from "generated/queries";

  const queryOperation = operationStore(EntertainmentPlayerDocument, { id });

  query(entertainmentPlayer);

  const { entertainmentPlayer } = queryOperation.data ?? {};
</script>

{#if $queryOperation.fetching}
  Loading...
{:else if $queryOperation.error}
  {$queryOperation.error}
{:else}
  <Button disabled={
      $entertainmentPlayer.state == EntertainmentPlayerStateEnum.Finish ||
      $entertainmentPlayer.state == EntertainmentPlayerStateEnum.Making
    }
  >
    MyButton
  </Button>
{/if}