How to reduce code using es6 destructuring syntax?

Question

I'm using urql with Svelte and I'm delighted.

There is one thing I would like to improve but I don't know how.

Many times I have code like this:

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

I use many, many and many times $entertainmentPlayer.data.entertainmentPlayer in my code.

Is ther a way to reduce this?

I tried this code instead:

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

But as you can see from the code I don't know how to call query(entertainmentPlayer) now.

If I use the below code I lose the typescript definitions on entertainmentPlayer:

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

query(entertainmentPlayerStore);

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

// Here `entertainmentPlayer` is no more typed.

Can you help me?

Dragonhead

Just use two different variables for the operation and the result data? – Deweese

What do you mean? – Dragonhead

"I lose the typescript definitions on entertainmentPlayer" - you shouldn't. Of course, you did default it to {} - is that the issue? – Deweese

Yes this is the issue. Can you help me? data can be undefined. – Dragonhead

I don't see why TypeScript would "lose the definitions" then, instead of just inferring the type to be either undefined or the object. – Deweese

Yeah, if I use that code my VSCode lose definitions on entertainmentPlayer. It doesn't recognize any field like entertainmentPlayer.name anymore. If I remove the { entertainmentPlayer: {} } part the definitions are working again. – Dragonhead

So what type does it infer? – Deweese

I don't know, this is my question. – Dragonhead

It seems to infer {} only. – Dragonhead

Answer 1

Nothing stops you from just introducing extra variables in your code:

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

Deweese

Disclaimer: I haven't used svelte myself so far – Deweese

I updated the question. – Dragonhead