我将 vue 3 与 apollo/client 一起使用，但出现错误

Question

我正在使用带有 apollo/client 的 vue 3 和composition api 。我按照文档做了所有事情，但这是我能做的。我提供了一个正确的后端网址，但无法弄清楚。这是我的代码，我在终端中收到警告

./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

Provide vue 功能是向子组件注入依赖。如果您希望 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

我自己对 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遇到了此错误