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

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.

Cordi

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.

Cordi