Quasar 2 + Apollo: Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup - vue.js

Question

followed the steps in https://github.com/quasarframework/app-extension-apollo/tree/v2 to install Apollo extension to 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"
},
found two files generated which are related to apollo:
src/boot/apollo.js
src/apollo/index.js, where I modified the process.env.GRAPHQL_URI to be mine GraphQL server endpoint
I also created apollo.provider.js under root manually with :
// 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"],
},
};
in My Vue file, I have the following code:
<script>
import { useQuery } from "#vue/apollo-composable";
import gql from "graphql-tag";
export default {
setup() {
const { result } = useQuery(gql`
query GetAllBooks {
getAllBooks {
id
name
}
}
`);
},
...
However, running this code led to the following error:
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)
Any idea which part's wrong?
I found this post I am using vue 3 with apollo/client but getting an error, seems Ricky Vadala's also using Quasar and following the same steps. However, the following doesn't work:
import { apolloClients } from 'src/extensions/apollo/boot'
as 'src/extensions/apollo/boot' does not exist.
Also, I cannot find your-app\node_modules#quasar\quasar-app-extension-apollo\README.md. Maybe Ricky Vadala was using an older version?
Please kindly shed some light on this. Surprisingly I cannot find an example of Quasar 2 + Apollo from the Internet.

Answer 1

Got help from Scott in here.
End of the day, it's an RTFM issue. I didn't read README carefully:
The extension will add a configuration file into src/apollo and a boot file. You'll need to manually register the latter into quasar.conf.js > boot.
Translate that to real-world action, I need to modify quasr.conf.js, find the boot part, and modify it to be:
boot: ["apollo.js"],
After that, the error went away, and I could see the call to my GraphQL endpoint from Chrome dev tools.