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?