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

Posted 2023-03-08

【中文标题】我正在将 vue 3 与 apollo/client 一起使用，但出现错误

【英文标题】：I am using vue 3 with apollo/client but getting an error

【发布时间】：2021-04-27 06:05:54

【问题描述】：

我正在使用带有 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>

【问题讨论】：

如果您在将 Quasar 与 Apollo 一起使用时遇到此错误，请参阅 ***.com/questions/70721226/…。

【参考方案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 )

【讨论】：

如果这对我有用，我会很高兴；但这不是因为它抱怨ApolloClient<NormalizedCacheObject> is not assignable to parameter of type ApolloClient<any>. Property setLink is missing in type ApolloClient<NormalizedCacheObject> but required in type ApolloClient<any>

【参考方案2】：

我遇到了同样的错误，但 让它运行，我意识到 repo 上的文档不完整。 https://github.com/quasarframework/app-extension-apollo/tree/v2

缺少这部分：

你的 src/App.vue 应该是这样的

<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：在 your-app\node_modules@quasar\quasar-app-extension-apollo\README.md 的库 README 中找到此内容

【参考方案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时遇到了这个错误