Vue2 Composition API Apollo client with id default not found - vuejs2

Question

I have started having an issue with apollo client in vue2 when using inside a watch.
I have followed the setup guide for apollo client when using the composition api:
https://v4.apollo.vuejs.org/guide-composable/setup.html#_2-connect-apollo-client-to-vue
so my main.ts looks like this:
import contentfulClient from "./plugins/vue-apollo-contentful";
import apiClient from "./plugins/vue-apollo-api";
Vue.config.productionTip = false;
Vue.use(VueApollo);
new Vue({
router,
store,
vuetify,
setup() {
provide(ApolloClients, {
default: apiClient,
apiClient,
contentfulClient,
});
},
render: (h) => h(App),
}).$mount("#app");
The clients have their own files and are setup the same:
import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
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 cache = new InMemoryCache();
const contentfulClient = new ApolloClient({
link,
cache,
});
export default contentfulClient;
I have this component:
import { defineComponent, onMounted, ref, watch } from "#vue/composition-api";
import { useGetCategory } from "#/logic/get-category";
export default defineComponent({
name: "Categories",
setup(_, context) {
const slug = ref(context.root.$route.params.slug);
const result = ref({});
const getCategory = (slug) => {
console.log(slug);
const { category, loading, error } = useGetCategory(slug);
result.value = { category, loading, error };
};
watch(() => context.root.$route.params.slug, getCategory);
onMounted(() => getCategory(slug.value));
return { result };
},
});
When this component loads, it "gets the category" by executing this:
import { useQuery, useResult } from "#vue/apollo-composable";
import * as getCategoryBySlug from "#/graphql/api/query.category.gql";
export function useGetCategory(slug: string) {
const { result, loading, error } = useQuery(getCategoryBySlug, { slug });
const category = useResult(result, null, (data) => data.getCategoryBySlug);
return { category, loading, error };
}
When the page loads, it gets the category fine, but if I change the route parameter (slug) I expect it to get the new category and display it. But instead I get this error:
So I figured that the setup is wrong in main.ts, so I added the non-composition-api aswell, found here:
https://apollo.vuejs.org/guide/installation.html#_1-apollo-client
Now my main.ts looks like this:
import contentfulClient from "./plugins/vue-apollo-contentful";
import apiClient from "./plugins/vue-apollo-api";
Vue.config.productionTip = false;
const apolloProvider = new VueApollo({
defaultClient: apiClient,
});
Vue.use(apolloProvider);
new Vue({
router,
store,
vuetify,
apolloProvider,
setup() {
provide(ApolloClients, {
default: apiClient,
apiClient,
contentfulClient,
});
},
render: (h) => h(App),
}).$mount("#app");
But this does not work. It compiles, but I still get the same error.
Does anyone know what I need to do to get this to work?

Answer 1

What works for me is
setup() {
provide(DefaultApolloClient, apolloClient);
},