Understanding node in realyjs query?

Question

I was trying to do a poc on Relayjs and am failing to understand the behavior it displays when I change the arguments. Here consider the following example. This is the first query that executes

query MainQuery($duration_0: Length!) {
  store {
    ...F1
  }
}

fragment F1 on Store {
  _storyConnection4nVN6E: storyConnection(random: 1, duration: $duration_0, first: 1) {
   // other unnecessary details
}

query variables: duration_0: "VALUE_1"

returns the result as expected but as soon as I change the value in my react component i.e. calling this.props.relay.setVariable({ //details }) then the query that relay executes is something like this.

query App_StoreRelayQL($id_0: ID!, $duration_1: Length!) {
  node(id: $id_0) {
    ...F1
  }
}
fragment F1 on Store {
  _storyConnection3tNeSy: storyConnection(random: 1, duration: $duration_1, first: 1) {
   // details
}

Why is this query on node and what is it anyway?

Answer 1

The node query you're seeing is Relay trying to efficiently fetch only the subtree of the query that was affected by the variable change.

Relay tries to minimize the amount of data fetched from the server by fetching only the parts that it needs. One way it does that is by using the node interface, which allows fetching items anywhere in the graph by id. In the case of changing variables (as in your query), it checks which part of the tree was affected by the change and fetches only that part.

Since GraphQL queries are trees, a variable change may only affect the subtree below the place where it's used. In your case it affects the root of the tree, so the two queries are effectively the same size, but Relay doesn't differentiate there.

In some cases minimizing the query is faster and more efficient, but in other cases it can actually be slower, so there are some tradeoffs when choosing a GraphQL client.

Relay was the only viable GraphQL open-source client for a while, but now others are being built. The most mature among them is Apollo client. Apollo client also does caching and query minimization like relay, but it doesn't use the node interface, and thus the queries it makes are easier to understand. Being easy to use, understand and debug are some of the main things that distinguish it from Relay. Given your question, you might find it useful to try it out. (note: I am involved in the project)