Change apollo client by computed property

[sashberd]

Hi,
I faced with issue in multiple apollo client app when I need to change apollo client dynamically according computed/vuex getter value. (In my case some boolean calculation)
However, it cannot be used, since, as I understand, computed property is not ready when apollo executes the query, thus I always run with "default client"

here is code below:

export default {
 computed: {
 isUserAuthenticated() {
      return (
        this.isAuthenticated && this.user.isAdmin
      );
    },
 ...mapGetters({   isAuthenticated: 'isAuthenticated',})
}

 apollo: {
    getCustomAdminData: {
      query: userRowId,
      client: (this.isUserAuthenticated && 'apolloAdminClient') || 'defaultClient',
      deep: false,
      variables() {
        return {
          userID: this.userId
        };
      },
      update(data) {
        return   ...
      },
    },
}

I found some remark in this issue. However, the provided solution as

 $client() {
        return (this.isUserAuthenticated && 'apolloAdminClient') || 'defaultClient';
      },

Is there any solution or workaround in order to get apollo client be dynamic?
Thanks

"vue-apollo": "^3.0.8",

[Akryum]

However, it cannot be used, since, as I understand, computed property is not ready when apollo executes the query, thus I always run with "default client"

The apollo queries are set up in the created component lifecycle hook, which means that all the reactivity (including computed properties) are already set up and available. Your issue might be somewhere else.

[Akryum]

There are several issues in your code sample:

client: (this.isUserAuthenticated && 'apolloAdminClient') || 'defaultClient',

This can never be reactive since it's not in a function, and this correspond to window hence why you always have 'defaultClient'.

Although you could use a function just like you usually would with variables, it won't work as client is not part of the reactive variables. You can however wrap the entire query options in a function that will be reactive (and will kill and restart the query with the new options automatically):

export default {
  apollo: {
    getCustomAdminData () {
      return {
        query: userRowId,
        client: this.isUserAuthenticated ? 'apolloAdminClient' : 'defaultClient',
        deep: false,
        variables () {
          return {
            userID: this.userId,
          }
        },
        update (data) {
          // ...
        },
      }
    },
  },
}