Vue-apollo: Reactive Variables with 'cache-first' not working in new version

[gijo-varghese]

I recently upgraded to the latest client 2.0. But after that reactive queries are not working. However, this is the case only for cache-first. For network-only its working. I think there is a bug in the new version. Looks like it can't read from cache

[gijo-varghese]

@Akryum I think its a bug with the latest version, v2.

The query below was working fine. But after upgrading, it's not working anymore

apollo: {
    user: {
      query: USER,
      variables() {
        return {
          id: this.$route.params.user_id
        }
      },
      fetchPolicy: 'cache-first' // If I change it to 'network-only' its works. But using devtools I found that the required data is already in cache
    }
  }

[Akryum]

Do you have a reproduction to share?

[gijo-varghese]

@Akryum mine is a little big code base and it's in localhost. So have to host 3 projects in order to show it to you

[Akryum]

Well, you don't have to share your entire project, but if you can, it would be great to have a minimal reproduction of the issue in a separate repository (or zip).

[gijo-varghese]

@Akryum ok. I'll create a simple repo and send it to you soon

[gijo-varghese]

@Akryum I've created for you: https://github.com/gijo-varghese/vue-apollo-demo
The master branch is with Apollo Client v1: Works Perfectly
The apollo-client-v2 is with Apollo Client v2: Not working as expected.

[gijo-varghese]

@Akryum are you able to reproduce it? I'm using a sample API developed by Graph Cool. Not sure how long will they exists

[Akryum]

I didn't have time to check it out just yet.

Le sam. 4 nov. 2017 à 10:53, Gijo Varghese [e-mail] a
écrit :

@Akryum https://github.com/akryum are you able to reproduce it? I'm
using a sample API developed by Graph Cool. Not sure how long will they
exists

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Akryum/vue-apollo/issues/138#issuecomment-341884770,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACqyfPXbvRgjknsvumR45S3Vy5Caimjqks5szDQIgaJpZM4QLGdZ
.

[gijo-varghese]

@Akryum can you please check it

[thomasaull]

I got the same problem, any updates on this?

[gijo-varghese]

@thomasaull try updating your packages. It's working for me now

[thomasaull]

@gijo-varghese No, unfortunately it doesn't solve the issue for me… I got an array of ids I want to filter my data with:

// Add 2: Works
const ids = [2]

// Add 5: Works
const ids = [2, 5]

// Remove 5: Doesn't work, my view doesn't get updates
const ids = [2]

This is only true if I use fetchPolicy: 'cache-first' which is the default afaik. If I change it to cache-and-network it does work, but it needs another request of data, which is already present…

[gijo-varghese]

Can you pls provide a link to the repo? I'll check it

[gijo-varghese]

Or try my repo: https://github.com/gijo-varghese/vue-apollo-demo (there is a branch with Apollo client v2)

[thomasaull]

I tried to create a test repo yesterday, but I couldn't reproduce the error… Queries in Apollo Dev Tools get updated accordingly, just the data doesn't show up in my component

[cnoter]

I think this is not an error.
my recommendation is this.

you need to make separate queries for both type.
one, not-using reactive variable query.
the other one, using reactive variable query.

then, with the second type of query, you need specify in apollo inmemory-cache's option
about how do you want characterize that type of query's dataIdFromObject.

for example:
__typename + id + 'reactive var'

then, you can using apollo cache as you want.

[gijo-varghese]

I left VueJS though 😐