如何解决未找到默认 ID 的 Vue2 Composition API Apollo 客户端
在手表内部使用时,我在 vue2 中遇到了 apollo 客户端的问题。 使用组合 api 时,我遵循了 apollo 客户端的设置指南:
https://v4.apollo.vuejs.org/guide-composable/setup.html#_2-connect-apollo-client-to-vue
所以我的 main.ts 看起来像这样:
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");
客户端有自己的文件并且设置相同:
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;
我有这个组件:
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,error };
};
watch(() => context.root.$route.params.slug,getCategory);
onMounted(() => getCategory(slug.value));
return { result };
},});
当这个组件加载时,它通过执行这个来“获取类别”:
import { useQuery,useResult } from "@vue/apollo-composable";
import * as getCategoryBySlug from "@/graphql/api/query.category.gql";
export function useGetCategory(slug: string) {
const { result,error } = useQuery(getCategoryBySlug,{ slug });
const category = useResult(result,null,(data) => data.getCategoryBySlug);
return { category,error };
}
当页面加载时,它的类别很好,但如果我更改路由参数(slug),我希望它获得新类别并显示它。但是我收到了这个错误:
所以我认为 main.ts 中的设置是错误的,所以我还添加了 non-composition-api,在这里找到:
https://apollo.vuejs.org/guide/installation.html#_1-apollo-client
现在我的 main.ts 看起来像这样:
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,apolloProvider,}).$mount("#app");
但这行不通。它编译,但我仍然得到同样的错误。 有谁知道我需要做什么才能让它发挥作用?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。