我正在使用vue 3与阿波罗/客户端，但得到一个错误

Question

我使用的是与apollo/client组合api的vue 3。我做了所有的文档，但这是我所能做的。我提供了一个正确的后端url，只是不能弄清楚。这是我的代码，我在终端

中得到一个警告./node_modules/@vue/apollo-composable/dist/useQuery.js

，在浏览器控制台中，我得到这个错误。

Uncaught Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

<template>
<div class="hello">
working with graphql
</div>
</template>
<script>
import { useQuery,DefaultApolloClient } from "@vue/apollo-composable"
import { provide } from "vue" 
import gql from "graphql-tag"
import {ApolloClient,createHttpLink,InMemoryCache,} from "@apollo/client/core"
const httpLink = createHttpLink({
uri: "http://localhost:3000/graphql",
})
const cache = new InMemoryCache()
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
export default {
name: "HelloWorld",
setup() {
provide(DefaultApolloClient, apolloClient)
const { result } = useQuery(gql`
query getPosts {
Post {
id
context
title
}
}
`)
console.log(result)
},
}
</script>

Answer 1

提供值函数是为子组件注入依赖。如果你想让ApolloClient在所有组件中可用，你应该从顶部提供它:

//main.js
...
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
const app = new Vue({
setup () {
provide(DefaultApolloClient, apolloClient)
},
render: h => h(App),
})

否则，您可以使用provideApolloClient，甚至在设置函数或vue文件之外，如导入的.js或.ts:

//userService.js
import {
provideApolloClient,
useQuery,
useResult,
} from '@vue/apollo-composable';
...
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
provideApolloClient(apolloClient);
const { result, loading, onError, onResult } = useQuery(query)
export let users = useResult(result, [], data => data.users )

Answer 2

我得到了相同的错误，但得到它运行，我意识到关于回购的文档是不完整的。https://github.com/quasarframework/app-extension-apollo/tree/v2

缺少此部分:

src/应用程序。我们应该像这样

<template>
<router-view />
</template>
<script lang="ts">
import { defineComponent, provide } from 'vue'
import { ApolloClients } from '@vue/apollo-composable'
import { apolloClients } from 'src/extensions/apollo/boot'
export default defineComponent({
name: 'App',
setup() {
provide(ApolloClients, apolloClients)
},
})
</script>

PD:在[e-mail]

Answer 3

我自己对Vue很陌生，但是关于警告;

warning in ./node_modules/@vue/apollo-composable/dist/useQuery.js

我相信这个解决方案将依赖于你的项目的依赖版本，但我通过添加这个脚本来修复它到我的项目:

https://github.com/vuejs/vue-apollo/issues/1011 issuecomment - 714410089

如果您不使用Vite，只需删除4-6行，它修复no such file or directory错误。如果你有不同的依赖版本，查看问题，你可能会找到一个适合你的版本的脚本。

希望这有帮助，我遇到了这个错误，跟着这个视频https://youtu.be/UbYt1PokMrM