Why this fragment makes this object null and the query not?

[frederikhors]

I have a reproduction: https://github.com/frederikhors/iss-urql-fragment-null-obj

😃😃😃😃

The problem

When you navigate to / it query the Player:1 object.

When you navigate to /team/1 it query the Team:1 object.

If you goback to / the Player is null now!

If you change the PLAYER_FRAGMENT moving these lines:

team {
    ...TEAM_FRAGMENT
}

to query player() it works (not null anymore).

The steps

• git clone https://github.com/frederikhors/iss-urql-fragment-null-obj
• npm install
• go to https://codesandbox.io/s/apollo-server-urql-svelte-crud-h1pcl to start the server
• npm run dev

The gif

Original question

If I use the below code it doesn't work, the second query (team()) makes the player null in cache.

fragment PLAYER on Player {
  id
  createdAt
  team {
    ...TEAM
  }
}

fragment TEAM on Team {
  id
  createdAt
}

query player($id: ID!) {
  player(id: $id) {
    ...PLAYER
  }
}

query team($id: ID!) {
  team(id: $id) {
    ...TEAM
    player {
      ...PLAYER
    }
  }
}

The code below addresses the issue (this is the only change I do in my code base):

fragment PLAYER on Player {
  id
  createdAt
  # removed these lines from here:
  # team {
  # 	...TEAM
  # }
}

fragment TEAM on Team {
  id
  createdAt
}

query player($id: ID!) {
  player(id: $id) {
    ...PLAYER
    # to here:
    team {
      ...TEAM
    }
  }
}

query team($id: ID!) {
  team(id: $id) {
    ...TEAM
    player {
      ...PLAYER
    }
  }
}

My question is: why it works in queries and not in fragments?

[frederikhors]

Sorry if I poke you guys, @JoviDeCroock @kitten (I'm in production with this mess), I can't even create a working codesandbox because it's really a mess to make them work there (I tried, really, you know me).

Have you ever had a fragment with an internal fragment that made an object null and instead using that same fragment in a query works (object not null)?

[frederikhors]

The correct example is #2103 (reply in thread).

If I use that ...TEAM and ...PLAYER in queries instead of fragments everything works. No null anymore.

This is the reason I don't understand when you talk about deterministic links.

If this works with queries why don't with fragments?

[frederikhors]

@JoviDeCroock the final recap is here: #2103 (comment)

[frederikhors]

@JoviDeCroock the question is updated with a REPRO. 😄

[JoviDeCroock]

So I tried looking at your repo which confused me quite a bit...

Your first query does the following, this is from the first / page:

query player($id: ID!) {
  player(id: $id) {
    ...PLAYER_FRAGMENT
  }
}

fragment PLAYER_FRAGMENT on Player {
  id
  description
  team {
    ...TEAM_FRAGMENT
  }
}

fragment TEAM_FRAGMENT on Team {
  id
  description
}

Which results in the output:

{
   "data":{
      "player":{
         "id":"1",
         "description":"I'm a player",
         "team":{
            "id":"2",
            "description":"I'm a Team",
            "__typename":"Team"
         },
         "__typename":"Player"
      }
   }
}

We can see that we correctly have Player:1.team which points to Team:2, however when we switch to /team/2, the query that pops up is the following

query team($id: ID!) {
  team(id: $id) {
    ...TEAM_FRAGMENT
    player {
      ...PLAYER_FRAGMENT
    }
  }
}

fragment TEAM_FRAGMENT on Team {
  id
  description
}

fragment PLAYER_FRAGMENT on Player {
  id
  description
  team {
    ...TEAM_FRAGMENT
  }
}

And the response to that is

{
   "data":{
      "team":{
         "id":"2",
         "description":"I'm a team",
         "player":{
            "id":"1",
            "description":"I'm a Player",
            "team":null,
            "__typename":"Player"
         },
         "__typename":"Team"
      }
   }
}

Do you see what's wrong here? You are effectively clearing Player:1.team to null because your API returns that... This is all found out by leveraging the network-tab and calling print() on your AST documents. Hence why I asked for the responses rather than just looking at the queries.

When I alter your codesandbox to use GQL paradigms and handle this recursion we get to a correct result in your front-end https://codesandbox.io/s/apollo-server-urql-svelte-crud-forked-hbmvs?file=/schema.js:398-408 --> https://github.com/frederikhors/iss-urql-fragment-null-obj/pull/1

[frederikhors]

You're completely right. I had problems in my backend.