add @quasar/apollo@next extension

Author: hipertracker

apollo.config.js

@@ -0,0 +1,12 @@
+/* eslint-env node */
+// See https://www.apollographql.com/docs/devtools/apollo-config/
+module.exports = {
+  client: {
+    service: {
+      name: 'my-service',
+      url: 'http://localhost:3000/graphql',
+    },
+    // Files processed by the extension
+    includes: ['src/**/*.vue', 'src/**/*.js', 'src/**/*.ts'],
+  },
+}

package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app": "^3.0.0",
+    "@quasar/quasar-app-extension-apollo": "^2.0.0-beta.3",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",

quasar.extensions.json

@@ -0,0 +1,5 @@
+{
+  "@quasar/apollo": {
+    "typescript": true
+  }
+}

src/apollo/index.ts

@@ -0,0 +1,83 @@
+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, ...} */ options?: Partial<BootFileParams<any>>
+) {
+  return <ApolloClientOptions<unknown>>Object.assign(
+    // General options.
+    <ApolloClientOptions<unknown>>{
+      link: createHttpLink({
+        uri:
+          process.env.GRAPHQL_URI ||
+          // Change to your graphql endpoint.
+          'https://example.com/graphql',
+      }),
+
+      cache: new InMemoryCache(),
+    },
+
+    // Specific Quasar mode options.
+    process.env.MODE === 'spa'
+      ? {
+          //
+        }
+      : {},
+    process.env.MODE === 'ssr'
+      ? {
+          //
+        }
+      : {},
+    process.env.MODE === 'pwa'
+      ? {
+          //
+        }
+      : {},
+    process.env.MODE === 'bex'
+      ? {
+          //
+        }
+      : {},
+    process.env.MODE === 'cordova'
+      ? {
+          //
+        }
+      : {},
+    process.env.MODE === 'capacitor'
+      ? {
+          //
+        }
+      : {},
+    process.env.MODE === 'electron'
+      ? {
+          //
+        }
+      : {},
+
+    // dev/prod options.
+    process.env.DEV
+      ? {
+          //
+        }
+      : {},
+    process.env.PROD
+      ? {
+          //
+        }
+      : {},
+
+    // For ssr mode, when on server.
+    process.env.MODE === 'ssr' && process.env.SERVER
+      ? {
+          ssrMode: true,
+        }
+      : {},
+    // For ssr mode, when on client.
+    process.env.MODE === 'ssr' && process.env.CLIENT
+      ? {
+          ssrForceFetchDelay: 100,
+        }
+      : {}
+  )
+}

src/boot/apollo.ts

@@ -0,0 +1,32 @@
+import { ApolloClient /*, createHttpLink */ } from '@apollo/client/core'
+import { ApolloClients } from '@vue/apollo-composable'
+import { boot } from 'quasar/wrappers'
+import { getClientOptions } from 'src/apollo'
+
+export default boot(
+  /* 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)
+
+    const apolloClients: Record<string, ApolloClient<unknown>> = {
+      default: apolloClient,
+      // clientA,
+      // clientB,
+    }
+
+    app.provide(ApolloClients, apolloClients)
+  }
+)