Many updates for v2, see PR description

.eslintignore

@@ -1 +1,2 @@
 node_modules
+.eslintrc.js

.eslintrc.js

@@ -15,20 +15,25 @@ module.exports = {
     browser: true,
   },
 
-  extends: [
-    'eslint:recommended',
-
-    'plugin:@typescript-eslint/recommended',
-    'plugin:@typescript-eslint/recommended-requiring-type-checking',
-
-    'prettier',
-  ],
-
-  plugins: ['@typescript-eslint'],
+  extends: ['eslint:recommended', 'prettier'],
 
   rules: {
     quotes: ['warn', 'single', { avoidEscape: true }],
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
   },
+
+  overrides: [
+    {
+      files: ['**/*.ts'],
+      plugins: ['@typescript-eslint'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-requiring-type-checking',
+        'prettier',
+      ],
+      rules: {
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+      },
+    },
+  ],
 }

README.md

@@ -13,52 +13,31 @@ It uses [Apollo Client](https://www.apollographql.com) and [Vue Apollo](https://
 quasar ext add @quasar/apollo@next
 ```
 
-**Note:** You need to use the `@next` tag until the final version of v2 of Quasar is released. At that point, we'll be moving v2 of the Apollo AE to the "latest" version and you will be able to install it without the `@next` tag. At that point, in order to install the older versions of the Apollo AE, you will need to add the version tag. This version will also stay in beta until Vue-Apollo is final (out of alpha or beta). 
+**Note:** You need to use the `@next` tag until the final version of v2 of Quasar is released. At that point, we'll be moving v2 of the Apollo AE to the "latest" version and you will be able to install it without the `@next` tag. At that point, in order to install the older versions of the Apollo AE, you will need to add the version tag. This version will also stay in beta until Vue-Apollo is final (out of alpha or beta).
 
 Quasar CLI will retrieve the extension from NPM
 ([@quasar/quasar-app-extension-apollo](https://www.npmjs.com/package/@quasar/quasar-app-extension-apollo))
 
-The extension will add a directory `src/extensions/apollo`.
+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`.
 
 ### Prompts
 
 You will be prompted if your app has typescript support, if you answer yes,
 `*.ts` files will be added instead of `*.js`.
 
-### App.vue
-
-Modify `src/App.vue` as shown below:
-
-```html
-<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>
-```
-
 ## Uninstall
 
 ```sh
 quasar ext remove @quasar/apollo
 ```
 
-You might also wish to remove the added directory `src/extensions/apollo`.
+You might also wish to remove the added directory `src/apollo` and related boot file.
 
 ## Apollo client options
 
 Apollo client options can be customized in
-`src/extensions/apollo/conf/index.(ts|js)`.
+`src/apollo/index.(ts|js)`.
 
 You will need either to set the GraphQL endpoint in it, or set it as an
 environment variable before running Quasar:
@@ -119,7 +98,7 @@ Example usage:
 
 ## Multiple apollo clients setup
 
-Un-comment the relevant code in `src/extensions/apollo/boot.(ts|js)`
+Un-comment the relevant code in `boot/apollo.(ts|js)`
 
 The following is an example using `clientA` instead of the default client:
 

lib/templates/src/extensions/apollo/conf/index.js → lib/templates/src/apollo/index.js

@@ -1,6 +1,5 @@
-import { createHttpLink, InMemoryCache } from '@apollo/client'
-
-export /* async */ function getClientOptions(/* {app, router, ...} */) {
+import { createHttpLink, InMemoryCache } from '@apollo/client/core'
+export /* async */ function getClientOptions(/* {app, router, ...} */ options) {
   return Object.assign(
     // General options.
     {
@@ -10,10 +9,8 @@ export /* async */ function getClientOptions(/* {app, router, ...} */) {
           // Change to your graphql endpoint.
           'https://example.com/graphql',
       }),
-
-      cache: new InMemoryCache({}),
+      cache: new InMemoryCache(),
     },
-
     // Specific Quasar mode options.
     process.env.MODE === 'spa'
       ? {
@@ -61,7 +58,6 @@ export /* async */ function getClientOptions(/* {app, router, ...} */) {
           //
         }
       : {},
-
     // For ssr mode, when on server.
     process.env.MODE === 'ssr' && process.env.SERVER
       ? {

lib/templates/src/extensions/apollo/boot.js → lib/templates/src/boot/apollo.js

@@ -1,31 +1,27 @@
-import { ApolloClient /*, createHttpLink */ } from '@apollo/client'
+import { ApolloClient /*, createHttpLink */ } from '@apollo/client/core'
+import { ApolloClients } from '@vue/apollo-composable'
 import { boot } from 'quasar/wrappers'
-import { getClientOptions } from 'src/extensions/apollo/conf'
-
-export let apolloClients
-
+import { getClientOptions } from 'src/apollo'
 export default boot(
-  /* async */ (/* {app, router, ...} */) => {
+  /* async */ ({ app }) => {
     // Default client.
     const options = /* await */ getClientOptions(/* {app, router ...} */)
     const apolloClient = new ApolloClient(options)
-
     // // Additional client `clientA`
     // const optionsA = { ...options }
     // // Modify options as needed.
     // optionsA.link = createHttpLink({ uri: 'http://clientA.example.com' })
     // const clientA = new ApolloClient(optionsA)
-
     // // Additional client `clientB`
     // const optionsB = { ...options }
     // // Modify options as needed.
     // optionsB.link = createHttpLink({ uri: 'http://clientB.example.com' })
     // const clientB = new ApolloClient(optionsB)
-
-    apolloClients = {
+    const apolloClients = {
       default: apolloClient,
       // clientA,
       // clientB,
     }
+    app.provide(ApolloClients, apolloClients)
   }
 )

package.json

@@ -2,10 +2,15 @@
   "name": "@quasar/quasar-app-extension-apollo",
   "version": "2.0.0-beta.1",
   "description": "A Quasar app extension to add GraphQL support using Apollo Client.",
-  "keywords": ["Quasar", "GraphQL", "Apollo"],
+  "keywords": [
+    "quasar",
+    "graphql",
+    "apollo"
+  ],
   "contributors": [
     "Scott Molinari <[email protected]>",
-    "Ejez <[email protected]>"
+    "Ejez <[email protected]>",
+    "Paolo 'Callo' Caleffi <[email protected]>"
   ],
   "license": "MIT",
   "publishConfig": {
@@ -18,23 +23,29 @@
   "bugs": "https://github.com/quasarframework/app-extension-apollo/issues",
   "homepage": "https://quasar.dev",
   "scripts": {
-    "lint": "eslint --ext .js,.ts ./src/templates/"
+    "lint": "eslint --ext .js,.ts ./src/templates/",
+    "format": "prettier --write \"**/*.{json,md,graphql,vue,js,ts}\"",
+    "build": "rm -rf lib && tsc --project tsconfig.build.json && yarn format",
+    "deploy:beta": "yarn build && yarn publish --tag beta",
+    "deploy:latest": "yarn build && yarn publish --tag latest"
   },
-  "files": ["/src", "/lib"],
+  "files": [
+    "/src",
+    "/lib"
+  ],
   "devDependencies": {
-    "@quasar/app": "^3.0.0-beta.15",
-    "@typescript-eslint/eslint-plugin": "^4.21.0",
-    "@typescript-eslint/parser": "^4.21.0",
-    "eslint": "^7.23.0",
-    "eslint-config-prettier": "^8.1.0",
-    "quasar": "^2.0.0-beta.12",
-    "typescript": "^4.2.4"
+    "@quasar/app": "^3.0.0-beta.22",
+    "@typescript-eslint/eslint-plugin": "^4.22.1",
+    "@typescript-eslint/parser": "^4.22.1",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
+    "prettier": "^2.3.0",
+    "quasar": "^2.0.0-beta.15"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.11",
+    "@apollo/client": "^3.3.16",
     "@vue/apollo-composable": "^4.0.0-alpha.12",
     "graphql": "^15.5.0",
-    "graphql-tag": "^2.11.0",
-    "react": "^17.0.2"
+    "graphql-tag": "^2.12.4"
   }
 }

src/index.js

@@ -1,8 +1,6 @@
+/* eslint-env node */
 module.exports = function (api) {
   api.extendQuasarConf((conf) => {
-    // Register the boot file.
-    conf.boot.unshift('~src/extensions/apollo/boot')
-
     // Allow overriding the graphql uri using an env variable
     // https://quasar.dev/quasar-cli/handling-process-env#Adding-to-process.env
     conf.build.env.GRAPHQL_URI = process.env.GRAPHQL_URI

src/install.js

@@ -1,3 +1,4 @@
+/* eslint-env node */
 module.exports = function (api) {
   // Quasar compatibility check.
   api.compatibleWith('quasar', '>=2.0.0-beta.8 <3.0.0')

src/prompts.js

@@ -1,10 +1,11 @@
+/* eslint-env node */
 module.exports = function () {
   return [
     {
       name: 'typescript',
       type: 'confirm',
       message: 'Does your app have typescript support?',
-      default: true,
+      default: false,
     },
   ]
 }

src/templates/src/extensions/apollo/conf/index.ts → src/templates/src/apollo/index.ts

@@ -1,8 +1,10 @@
-import type { ApolloClientOptions } from '@apollo/client'
-import { createHttpLink, InMemoryCache } from '@apollo/client'
-/* import type { BootFileParams } from '@quasar/app' */
+import type { ApolloClientOptions } from '@apollo/client/core'
+import { createHttpLink, InMemoryCache } from '@apollo/client/core'
+import type { BootFileParams } from '@quasar/app'
 
-export /* async */ function getClientOptions(/* {app, router, ...}: Partial<BootFileParams<unknown>> */) {
+export /* async */ function getClientOptions(
+  /* {app, router, ...} */ options?: Partial<BootFileParams<any>>
+) {
   return <ApolloClientOptions<unknown>>Object.assign(
     // General options.
     <ApolloClientOptions<unknown>>{
@@ -13,7 +15,7 @@ export /* async */ function getClientOptions(/* {app, router, ...}: Partial<Boot
           'https://example.com/graphql',
       }),
 
-      cache: new InMemoryCache({}),
+      cache: new InMemoryCache(),
     },
 
     // Specific Quasar mode options.

src/templates/src/extensions/apollo/boot.ts → src/templates/src/boot/apollo.ts

@@ -1,12 +1,10 @@
-import { ApolloClient /*, createHttpLink */ } from '@apollo/client'
+import { ApolloClient /*, createHttpLink */ } from '@apollo/client/core'
+import { ApolloClients } from '@vue/apollo-composable'
 import { boot } from 'quasar/wrappers'
-/* import type { BootFileParams } from '@quasar/app' */
-import { getClientOptions } from 'src/extensions/apollo/conf'
-
-export let apolloClients: Record<string, ApolloClient<unknown>>
+import { getClientOptions } from 'src/apollo'
 
 export default boot(
-  /* async */ (/* {app, router, ...}: BootFileParams<unknown> */) => {
+  /* async */ ({ app }) => {
     // Default client.
     const options = /* await */ getClientOptions(/* {app, router ...} */)
     const apolloClient = new ApolloClient(options)
@@ -23,10 +21,12 @@ export default boot(
     // optionsB.link = createHttpLink({ uri: 'http://clientB.example.com' })
     // const clientB = new ApolloClient(optionsB)
 
-    apolloClients = {
+    const apolloClients: Record<string, ApolloClient<unknown>> = {
       default: apolloClient,
       // clientA,
       // clientB,
     }
+
+    app.provide(ApolloClients, apolloClients)
   }
 )

tsconfig.build.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "noEmit": false,
+
+    // Forces to include "quasar" types even if not referenced into the code
+    // Needed to get typings of "@quasar/app" and "quasar/wrappers"
+    "types": ["quasar"],
+    // Ignores webpack and tapable conflicting types due to webpack-chain not supporting webpack5
+    "skipLibCheck": true,
+
+    "outDir": "lib/templates",
+    "rootDir": "./src/templates"
+  },
+  "include": ["src/templates/**/*"]
+}

tsconfig.json

@@ -1,18 +1,18 @@
 {
   "compilerOptions": {
-    "esModuleInterop": true,
+    "allowJs": true,
     "module": "esnext",
     "moduleResolution": "node",
     "strict": true,
     "target": "esnext",
+    // Avoid warning for conflicting generated JS files,
+    // emitting is needed only in build config
+    "noEmit": true,
 
     "baseUrl": ".",
     "paths": {
       "src/*": ["src/templates/src/*"]
-    },
-
-    "outDir": "lib",
-    "rootDir": "./src"
+    }
   },
-  "include": ["src/**/*"]
+  "include": ["lib/templates", "src"]
 }