Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient()

按照https://github.com/quasarframework/app-extension-apollo/tree/v2中的步骤将Apollo扩展安装到Quasar 2.4.9:

  "devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "@quasar/app": "^3.0.0",
    "@quasar/quasar-app-extension-apollo": "^2.0.0-beta.3",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^7.0.0",
    "eslint-webpack-plugin": "^2.4.0"
  },

找到两个生成的与Apollo相关的文件:

  • src/ot/apollo.js
  • src/apollo/index.js,其中我将进程.env.GRAPHQL_URI修改为我的GraphQL服务器端点

我还使用:

在根目录下手动创建了apollo.Provider.js
// apollo.config.js
module.exports = {
  client: {
    service: {
      name: "my-app",
      // URL to the GraphQL API
      url: "http://localhost:4000/graphql",
    },
    // Files processed by the extension
    includes: ["src/**/*.vue", "src/**/*.js"],
  },
};

在我的Vue文件中,我有以下代码:

<script>
import { useQuery } from "@vue/apollo-composable";
import gql from "graphql-tag";
export default {
  setup() {
    const { result } = useQuery(gql`
      query GetAllBooks {
        getAllBooks {
          id
          name
        }
      }
    `);
  },
...

但是,运行此代码会导致以下错误:

index.esm.js?0df5:48 Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.
    at resolveClient (index.esm.js?0df5:48:1)
    at start (index.esm.js?0df5:277:1)
    at immediate (index.esm.js?0df5:493:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?9e79:6737:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?9e79:6746:1)
    at job (runtime-core.esm-bundler.js?9e79:7154:1)
    at doWatch (runtime-core.esm-bundler.js?9e79:7199:1)
    at watch (runtime-core.esm-bundler.js?9e79:7040:1)
    at useQueryImpl (index.esm.js?0df5:491:1)
    at useQuery (index.esm.js?0df5:228:1)

知道哪部分错了吗?

我发现这个帖子I am using vue 3 with apollo/client but getting an error,似乎Ricky Vadala也在使用Quasar,并遵循相同的步骤。但是,以下选项不起作用:

  import { apolloClients } from 'src/extensions/apollo/boot'

AS‘src/Exages/Apollo/Boot’不存在。

还有,我找不到您的-app Ode_modules@quasarquasar-app-extension-apolloREADME.md.也许里奇·瓦达拉使用的是旧版本?

请说明一下这一点。令人惊讶的是,我在互联网上找不到一个类星体2+阿波罗的例子。


解决方案

从here中的Scott获得帮助。

归根结底,这是一个RTFM问题。我没有仔细阅读README:

该扩展将在src/apollo中添加一个配置文件和一个引导文件。您需要手动将后者注册到quasar.conf.js>;启动中。

将其转换为实际操作,我需要修改quasr.conf.js,找到引导部分,并将其修改为:

    boot: ["apollo.js"],

之后,错误消失,我可以看到从Chrome开发工具对我的GraphQL终结点的调用。

相关文章