Extending reactive array variable gives empty object as a result

[TheCheat]

For some reason apollo returns empty result when trying to extend reactive array either with pushing a value to it, or reassigning with new value, even reassigning to another predefined reactive value.
Examples:
Example 1 (extending array): http://jsfiddle.net/oyejk2qL/100/
Example 2 (expected result without extending array): http://jsfiddle.net/oyejk2qL/99/
Example 3 (extending array then expected result and some voodoo magic happens): http://jsfiddle.net/oyejk2qL/98/
Also. Really weird behaviour on last test when creating a new Vue instance

[vladimir-chernenko]

Same here.
I've tried create filter for job posts by tags, but after first search started to get empty object in result.

query allJobs ($tags: [ID]!) {
  allJobs (tags: $tags) {
    pageInfo {
      startCursor
      endCursor
    }
    edges {
      node {
        id
        title
        highlighted
        createdAt
        tags {
          edges {
            node {
              name
            }
          }
        }
        company {
          name
          companyUrl
        }
      }
    }
  }
}

And variables are list of IDs which are type of String

variables () {
  return {
    tags: this.searchTags
  }
}

Interesting that the problem disappears when I use graphql console.

Maybe apollo caching making some problems? Do anyone know how to turn it off per query?

[vladimir-chernenko]

Even with network-only on query

const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network'
    },
    query: {
      fetchPolicy: 'network-only'
    }
  }
})

I think Apollo trying to check the cache but array of data for variables is creating some issues.

[jpikora]

Encountered the same issue. It has probably something to do with immutability within apollo. In my query I'm using a filter object as param, containing several arrays (e.g. tags, categories, ...). To make it work without an error I'm currently making copies of those arrays in the process of requesting the filter object.

So basically in your case try this:

variables () {
  return {
    tags: this.searchTags.slice()
  }
}

[Samuell1]

Maybe its same issue like #219

[Akryum]

Apollo results are immutable, so you should make copies if you want to modify them.

[jpikora]

I've dived a little bit deeper and actually this happens because of how ObservableQuery.prototype.setVariables function works in Apollo.

When variables are changed it tries to figure out whether the old and new variables are equal, by using deep comparison check, however the variables are never dereferenced by Apollo as this is probably expected to be handled elsewhere.

If there is for example an array which is stored in Vuex and used inside query variables, then by pushing new item into the array will change both old and new query variables at the same time, as they will reference the same array. This will fool Apollo to think the variables have not changed and tries to return something which was not previously loaded => {}.

So currently in case of complex query variables (using types passed by reference), we have to think about dereferencing the variables (make copies, clones) before passing it to Apollo.

Usually query variables come from some sort of centralized store, so I believe this is not problem in React/Redux since values there are immutable by default, but in Vue/Vuex this is not required and because of that we are probably experiencing these kind of issues when integrating Apollo.