Why data is suddendly null here?

Question

Why this behavior?

Reproduction steps:

1. Go to https://stackblitz.com/edit/sveltejs-kit-template-default-9dvq26

2. Open a new window of the same stackblitz project

3. Click on the button "Delete Team"

4. Suddendly the worst becomes reality in the other window: data: null!

GIF

Code:

• index.svelte:

<script lang="ts">
  import { gql, operationStore, query, mutation, subscription } from "@urql/svelte";

  const GamesQuery = gql`
    query games {
      games {
        id
        team {
          id
        }
      }
    }
  `;

  const PlayersQuery = gql`
    query players {
      players {
        id
        team {
          id
        }
      }
    }
  `;

  const TeamsQuery = gql`
    query teams {
      teams {
        id
        gameID
        game {
          id
        }
      }
    }
  `;

  const AddTeamToGameQuery = gql`
    mutation addTeamToGame($gameID: ID!) {
      addTeamToGame(gameID: $gameID)
    }
  `;

  const DeleteTeamFromGameQuery = gql`
    mutation deleteTeamFromGame($gameID: ID!) {
      deleteTeamFromGame(gameID: $gameID)
    }
  `;

  const AddTeamToPlayerQuery = gql`
    mutation addTeamToPlayer($playerID: ID!) {
      addTeamToPlayer(playerID: $playerID)
    }
  `;

  const DeleteTeamFromPlayerQuery = gql`
    mutation deleteTeamFromPlayer($playerID: ID!) {
      deleteTeamFromPlayer(playerID: $playerID)
    }
  `;

    const addTeamToGame = mutation({query: AddTeamToGameQuery});
    const deleteTeamFromGame = mutation({query: DeleteTeamFromGameQuery});
    const addTeamToPlayer = mutation({query: AddTeamToPlayerQuery});
    const deleteTeamFromPlayer = mutation({query: DeleteTeamFromPlayerQuery});

  const gamesStore = operationStore(GamesQuery, {}, { requestPolicy: "cache-and-network" });
  query(gamesStore);

  const playersStore = operationStore(PlayersQuery, {}, { requestPolicy: "cache-and-network" });
  query(playersStore);

  const teamsStore = operationStore(TeamsQuery, {}, { requestPolicy: "cache-and-network" });
  query(teamsStore);

  const ActQuery = gql`
  subscription act {
    act {
      action
      resourceType
      resourceID
    }
  }`

  const actsStore = operationStore(ActQuery);

    subscription(actsStore);

  $: games = $gamesStore.data?.games;
  $: players = $playersStore.data?.players;
  $: teams = $teamsStore.data?.teams;

  async function onAddTeamToGame(id) {
    const result = await addTeamToGame({gameID: id});
    if (result.error) console.error(result.error)
  }

  async function onDeleteTeamFromGame(id) {
    const result = await deleteTeamFromGame({gameID: id});
    if (result.error) console.error(result.error)
  }

  async function onAddTeamToPlayer(id) {
    const result = await addTeamToPlayer({playerID: id});
    if (result.error) console.error(result.error)
  }

  async function onDeleteTeamFromPlayer(id) {
    const result = await deleteTeamFromPlayer({playerID: id});
    if (result.error) console.error(result.error)
  }
</script>

<h1>Games</h1>
<ul>
{#each games || [] as game}
  <li>ID: {game.id} - Team: {JSON.stringify(game.team)} - 
  {#if game.team}
    <button type="button" on:click={() => onDeleteTeamFromGame(game.id)}>
    Delete team
    </button>
  {:else}
    <button type="button" on:click={() => onAddTeamToGame(game.id)}>
    Add new team
    </button>
  {/if}
  </li>
{/each}
</ul>

<br>

<h1>Players</h1>
<ul>
{#each players || [] as player}
  <li>ID: {player.id} - Team: {JSON.stringify(player.team)} - 
  {#if player.team}
    <button type="button" on:click={() => onDeleteTeamFromPlayer(player.id)}>
    Delete team
    </button>
  {:else}
    <button type="button" on:click={() => onAddTeamToPlayer(player.id)}>
    Add new team
    </button>
  {/if}
  </li>
{/each}
</ul>

<br>

<h1>Teams</h1>
<ul>
{#each teams || [] as team}
  <li>ID: {team.id} - Game: {JSON.stringify(team.game)} - Player: {JSON.stringify(team.player)}</li>
{/each}
</ul>

Answer 1

It looks like this is the intended behavior; It's deleting the team, therefore setting its data to null.

If you mean "Why are the teams disappearing from the Games section?", then that's most likely an error in the Svelte code or a badly formatted graphql call.