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终结点的调用。
相关文章