svelte: infinite polling even if the component self-destructs!

[frederikhors]

💀 I just discovered something that ruined my day! 💀

😢 😄 😢 😄 😢

REPL: https://codesandbox.io/s/urql-svelte-crud-pollinterval-keeps-calling-ohr25

I thought that all queries in my components were "destroyed" when every single component was "destroyed".

But perhaps it's not!

I'm using svelte package.

As you can see from REPL in Todo.svelte file:

<script>
  import { onDestroy } from "svelte";
  import { push } from "svelte-spa-router";
  import { query, mutate } from "@urql/svelte";
  import { TODO_QUERY, UPDATE_TODO } from "./gql";

  export let params;

  function updateTodo(id) {
    mutate({ query: UPDATE_TODO, variables: { id } });
    push("#/todos");
  }

  $: todo = query({
    query: TODO_QUERY,
    variables: { id: params.id },
    requestPolicy: "cache-and-network",
    pollInterval: 2000
  });

  onDestroy(() => console.log("I'm destroying myself!"));
</script>

<h3>Todo detail view</h3>
<br>

{#if !$todo || $todo.fetching || !$todo.data}
  Loading todo...
{:else if $todo.error}
  Oh no! {$todo.error.message}
{:else}
  <b>ID</b>: {$todo.data.todo.id}<br><br>
  <b>Text</b>: {$todo.data.todo.text}<br><br>
  <b>Complete</b>: {$todo.data.todo.complete}<br><br>
  <button on:click={() => updateTodo($todo.data.todo.id)}>{$todo.data.todo.complete}</button>
{/if}

I'm using

pollInterval: 2000

and I have this:

onDestroy(() => console.log("I'm destroying myself!"));

but just after that console.log("") appears in browser's console the urql polling continues indefinitely!!! 💀 💀 💀

WHY???

[frederikhors]

Plus, the call is always "canceled" because 2000ms is less than the time it takes for the server to respond.

Because of this I think: #531.

[kitten]

continues indefinitely!

not related to the issue you mentioned if it continues even after unmount; it's probably best to first search in the Svelte integration pieces first.

[frederikhors]

not related to the issue you mentioned if it continues even after unmount;

Yeah, I know. I mean the second problem.

it's probably best to first search in the Svelte integration pieces first.

I'm looking for it, but it's not for me I think! Sooooo sad! 😢

[frederikhors]

I' tried also with this as a workaround:

let pollInterval = 2000

$: todo = query({
  query: TODO_QUERY,
  variables: { id: params.id },
  requestPolicy: "cache-and-network",
  pollInterval
})

onDestroy(() => {
  console.log("I'm destroying myself!")
  pollInterval = 0
})

but nothing. The poll still there... :(

[frederikhors]

Not working with this too:

  function stopPoll () {
    pollInterval = 0
  }

It's weird...

[kitten]

Our current bindings for Svelte have a lot of problems, as we never intended for them to be extensively used already. Hence I'm grouping several issues into an umbrella issue to express an intent to reimplement the bindings for a v1.0 with all that we've learned, which supersedes this issue.
The umbrella issue where we'll plan out a new version, API, and implementation can be found here: #1007