Vue-apollo: Query data not the same as GraphiQL & Network Response

[josephstein]

GraphQL Query:

query($id: EventId!) {
    getEvent(id: $id) {
        event {
            id
            // ...other attributes
            times {
                id
                hour
                minute
            }
            previousEvents {
                id
                // ...other attributes 
                times {
                    id
                    hour
                    minute
                    count
                }
            }
        }
    }
}

GraphiQL & Network Response Result:

{
  "data": {
    "getEvent": {
      "event": {
        "id": "cGF0aWVudDo5NDQyOQ==",
        "times": [
          {
            "id": "ZG9zZToxODA1NDk=",
            "hour": 9,
            "minute": 0
          },
          {
            "id": "ZG9zZToxODA1NTA=",
            "hour": 13,
            "minute": 0
          },
          {
            "id": "ZG9zZToxODA1NTE=",
            "hour": 17,
            "minute": 0
          },
          {
            "id": "ZG9zZToxODA1NTI=",
            "hour": 21,
            "minute": 0
          }
        ],
        "previousEvents": [
          {
            "id": "bWVkaWNhdGlvbjoyNDY3NzA=",
            "times": [
              {
                "id": "ZG9zZToxODA1NDk=",
                "hour": 9,
                "minute": 0,
                "count": 6
              },
              {
                "id": "ZG9zZToxODA1NTA=",
                "hour": 13,
                "minute": 0,
                "count": 2
              },
              {
                "id": "ZG9zZToxODA1NTI=",
                "hour": 21,
                "minute": 0,
                "count": 1
              }
            ]
          },
          {
            "id": "bWVkaWNhdGlvbjoyNDY3NzE=",
            "times": [
              {
                "id": "ZG9zZToxODA1NDk=",
                "hour": 9,
                "minute": 0,
                "count": 7 // When logging the results in the application, this returns a 6 instead
              },
              {
                "id": "ZG9zZToxODA1NTA=",
                "hour": 13,
                "minute": 0,
                "count": 5 // When logging the results in the application, this returns a 2 instead
              }
            ]
          }
        ]
      }
    }
  }
}

It returns correctly in GraphiQL and when inspecting the network response, however when I print out the results from the application the count values are not as expected. It seems to try and be smart and does an internal lookup for that previousEvents.times.id and returns the same count it retrieved from the first element in the array (the counts from bWVkaWNhdGlvbjoyNDY3NzA).

If I remove previousEvents.times.id from the gql statement then it does return the correct values as expected though.

I read through the documentation to see if there's a configuration option related to this but didn't see anything mentioned.

[Samuell1]

count can be reserved word by something, try changing it to something other

[josephstein]

Just gave that a try and getting the same results

[TychoCRD]

I am also having this issue: nested data on vue-apollo query response (seen in Vue dev tools and in related logic) is different from graphiql and network response. I get a duplicate of an object despite one property being different.

Edit: Perhaps worth noting, my issue is also a property with a number type value.

[baldwinchang]

I am also having this issue when id field in my queries are the same -- non-unique. Apollo seems to duplicate the result across the same keys, even though the network response is clearly different.

Removing the id field from the GraphQL query resolves the issue for me. Does anyone happen to know if this issue is unique to the Vue version or across all Apollo implementations?

[Akryum]

Make sure you have the __typename field in your results.
You can also try setting up your own data normalization: https://www.apollographql.com/docs/react/features/cache-updates.html#normalization