Vue 2.7 and Apollo

Help
,
1

Hey all,

I wonder if anyone can help. I have updated to vue 2.7 (from 2.6) and managed to get my application to compile. I was using composition-api, but it’s included in 2.7 which was the main reason for the update.
When I run my application, I get an error:

Instance $root not found

If I look into the code, I can see it’s this line:

import {watch, onUnmounted, ref as ref2, getCurrentInstance as getCurrentInstance2, onBeforeUnmount} from "vue-demi";
function getAppTracking() {
  var _a;
  const vm = getCurrentInstance2();
  const root = (_a = vm == null ? void 0 : vm.$root) != null ? _a : vm == null ? void 0 : vm.root;
  if (!root) {
    throw new Error("Instance $root not found");
  }

Because it is trying to use getCurrentInstance which doesn’t exist in vue 2.7 :frowning:
I should point out that I use @vue/apollo-compasable too, which might be where the issue lies.
I need this because I have 2 graphql services (one for my API and one for the headless CMS i use).
I have this setup like this:

import "./registerServiceWorker";
import Vue from "vue";

import { provide } from "vue";
import { ApolloClients } from "@vue/apollo-composable";

import contentfulClient from "./_core/plugins/vue-apollo-contentful";
import apiClient from "./_core/plugins/vue-apollo-api";

import App from "./app.component.vue";
import router from "./router";
import store from "./store";

import "./scss/_core.scss";

Vue.config.productionTip = false;

const app = new Vue({
  router,
  store,
  setup() {
    provide(ApolloClients, {
      default: apiClient,
      apiClient,
      contentfulClient,
    });
  },
  render: (h) => h(App),
});

app.$mount("#app");

the two “clients” I import look like this:

import {
  ApolloClient,
  InMemoryCache,
  createHttpLink,
} from "@apollo/client/core";
const uri = `https://graphql.contentful.com/content/v1/spaces/${process.env.VUE_APP_CONTENTFUL_SPACE_ID}/environments/${process.env.VUE_APP_CONTENTFUL_ENV}?access_token=${process.env.VUE_APP_CONTENTFUL_ACCESS_TOKEN}`;
const link = createHttpLink({
  uri,
});

const pageTypePolicy = {
  keyArgs: ["where", ["path"]],
  // eslint-disable-next-line
  merge(existing, incoming, options) {
    // console.log("options", options);
    // console.log("existing", existing);
    // console.log("incoming", incoming);
    return incoming;
  },
};

const containerTypePolicy = {
  keyArgs: ["id"],
  read(existing) {
    //console.log("read", existing);
    return existing;
  },
  // eslint-disable-next-line
  merge(existing, incoming, { args }) {
    //console.log("options", args.id);
    //console.log("existing", existing);
    //console.log("incoming", incoming);
    return incoming;
  },
};

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        pageCollection: pageTypePolicy,
        container: containerTypePolicy,
      },
    },
  },
});

//const cache = new InMemoryCache();

const contentfulClient = new ApolloClient({
  link: link,
  cache,
});

export default contentfulClient;

and

import {
  ApolloClient,
  InMemoryCache,
  createHttpLink,
} from "@apollo/client/core";
import { setContext } from "@apollo/client/link/context";

import store from "../../store/index";

const uri = `${process.env.VUE_APP_API_URL}/graphql`;
const link = createHttpLink({
  uri,
});

import { onError } from "@apollo/client/link/error";

const errorLink = onError(({ graphQLErrors }) => {
  if (process.env.NODE_ENV === "production" || !graphQLErrors) return;

  graphQLErrors.map(({ message, locations, path }) => {
    console.log(
      `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
    );
    store.dispatch("errorsAdd", message);
  });
});

// const typePolicy = {
//   keyArgs: [
//     "model",
//     [
//       "facets",
//       "filters",
//       "includePartialMatches",
//       "itemsToShow",
//       "orderBy",
//       "searchTerm",
//     ],
//   ],
//   // Concatenate the incoming list items with
//   // the existing list items.
//   merge(existing, incoming, options) {
//     console.log("existing", existing);
//     console.log("incoming", incoming);
//     console.log("page", options.args.model);
//     console.log("----------");
//     return incoming;
//   },
// };

// const cache = new InMemoryCache({
//   typePolicies: {
//     Query: {
//       fields: {
//         searchCategories: typePolicy,
//         searchBrands: typePolicy,
//         searchPages: typePolicy,
//         searchProducts: typePolicy,
//       },
//     },
//   },
// });

const cache = new InMemoryCache();

const authLink = setContext(async (_, { headers }) => {
  const user = store.getters.user;
  const token = user?.token ? `Bearer ${user.token}` : "";

  if (!token) return { headers: { ...headers } };

  store.dispatch("userUpdateSlidingExpiration", user);

  return {
    headers: {
      ...headers,
      authorization: token || "",
    },
  };
});

const apiClient = new ApolloClient({
  link: authLink.concat(errorLink.concat(link)),
  cache,
});

export default apiClient;

If anyone can tell me how to get this working in vue 2.7 or show me some documentation, that would be awesome. I have to say, setting this up in the first place was a nightmare and I was hoping to not need to do anything :frowning:

Please help