Configuration of apollo-vue in boot file

[danielbender1989]

I am trying to set up my Quasar app with apollo-vue in combination with AWS AppSync. Following the apollo-vue documentation, I have to install the plugin via Vue.use(). Therefore, I created a boot file to setup everything to use the plugin in my components using app.use as described in the Quasar bootfile doc:

import VueApollo from "vue-apollo";
import AWSAppSyncClient from "aws-appsync";
import { Auth } from "@aws-amplify/auth";

const config = {
  url: "https://XXX.appsync-api.eu-central-1.amazonaws.com/graphql",
  region: "eu-central-1",
  auth: {
    type: "AMAZON_COGNITO_USER_POOLS",
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken(),
  },
};

const client = new AWSAppSyncClient(config);
const appsyncProvider = new VueApollo({
  defaultClient: client,
});

// leave the export, even if you don't use it
export default ({ app, router, store }) => {
  app.use(VueApollo);
  app.config.globalProperties.$apollo = appsyncProvider;
};

When doing so, the App compiles fine but in the browser console the following error appears:

[Quasar] boot error: TypeError: undefined is not a non-null object
    install vue-apollo.esm.js:2150
    use runtime-core.esm-bundler.js:4349
    __WEBPACK_DEFAULT_EXPORT__ appsync.js:22
    start client-entry.js:93
    <anonymous> client-entry.js:150
[client-entry.js:109](webpack://ddi-frontend/.quasar/client-entry.js?2f39)
    start client-entry.js:109
    <anonymous> client-entry.js:150

I am fairly new to Quasar. Am I missing something here? Is it the correct way to use a Vue plugin?

[singerla]

You could take a look at app-extension-apollo. I am using it for a while and it does its job. Installation will create an "apollo" subdirectory where you can place your settings.

[danielbender1989]

I had a look at that previously but it doesn't support subscriptions which I would like to use in my project See Open Issue.

[singerla]

I've managed to connect app-extension-apollo to a websocket like below. I'm not sure if it helps with AWS AppSync, but you could give a try.

apollo/index.ts

import { createHttpLink } from '@apollo/client/core';
import { cache } from './cache';
import { split } from 'apollo-link';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { BootFileParams } from '@quasar/app-webpack';
import { ApolloLink } from 'apollo-boost';

// Create the subscription websocket link
const wsLink = new WebSocketLink({
  uri: process.env.WEBSOCKETS_URI || 'ws://localhost:4000/graphql',
  options: {
    reconnect: true,
    connectionParams: {
       // put your auth token here
    },
  },
});

const httpLink = createHttpLink({
  uri: process.env.GRAPHQL_URI || 'http://localhost:4000/graphql',
  credentials: 'include',
}) as unknown as ApolloLink;

const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

export /* async */ function getClientOptions(
  /* {app, router, ...} */ options?: Partial<BootFileParams<any>>
) {
  return Object.assign(
    // General options.
    {
      link: link,
      // link: httpLink,
      cache: cache,
      credentials: 'include',
    },

    // Specific Quasar mode options.
  );
}

[danielbender1989]

I think the beauty of vue-apollo is that subscriptions are quiet seamlessly integrated into Vue components via subscribeToMore in an Apollo object (docs). I was hoping that apollo-vue is in some way usable with Quasar but it doesn't really look like - at least not in combination with an AppSync based client - I didn't test it with a pure Apollo client which would likely work better.

apollo: {
  tags: {
    query: TAGS_QUERY,
    subscribeToMore: {
      document: gql`subscription name($param: String!) {
        itemAdded(param: $param) {
          id
          label
        }
      }`,
      // Variables passed to the subscription. Since we're using a function,
      // they are reactive
      variables () {
        return {
          param: this.param,
        }
      },
      // Mutate the previous result
      updateQuery: (previousResult, { subscriptionData }) => {
        // Here, return the new result from the previous with the new data
      },
    }
  }
}

For now I am using the AWS Amplify API to subscribe to data and call it during mount of the component which works fine for me but is not as nice:

My test component:

<template>
  <q-page class="flex flex-center">
    <q-table title="Items" :rows="rows" :columns="columns" row-key="id" />
    <q-card class="my-card">
      <div class="q-pa-md">
        <q-input
          label="Version"
          v-model="version"
          type="text"
          filled
          style="max-width: 200px"
        />
        <q-btn
          color="white"
          text-color="black"
          label="Create new"
          @click="putDemo"
        />
      </div>
    </q-card>
    <q-card>
      <q-input
        label="ID"
        v-model="updateId"
        type="text"
        filled
        style="max-width: 200px"
      />
      <q-input
        label="Version"
        v-model="updateVersion"
        type="text"
        filled
        style="max-width: 200px"
      />
      <q-btn
        color="white"
        text-color="black"
        label="Update Item"
        @click="updateDemo"
      />
    </q-card>
    <q-card>
      <q-input
        label="ID"
        v-model="deleteId"
        type="text"
        filled
        style="max-width: 200px"
      />
      <q-btn
        color="white"
        text-color="black"
        label="Delete Item"
        @click="deleteDemo"
      />
    </q-card>
  </q-page>
</template>

<script>
import { getDemos } from "../graphql/Queries";
import { addDemo, updateDemo, deleteDemo } from "../graphql/Mutations";
import {
  ADDED_DEMO_SUBSCRIPTION,
  UPDATED_DEMO_SUBSCRIPTION,
  DELETED_DEMO_SUBSCRIPTION,
} from "../graphql/Subscriptions";
import { API, graphqlOperation } from "aws-amplify";

export default {
  data() {
    return {
      version: "10",
      updateVersion: "10",
      updateId: "10",
      deleteId: "10",
      columns: [
        {
          name: "id",
          required: true,
          label: "ID",
          align: "left",
          field: (row) => row.id,
          format: (val) => `${val}`,
          sortable: true,
        },
        {
          name: "version",
          align: "center",
          label: "Version",
          field: (row) => row.version,
          format: (val) => `${val}`,
          sortable: true,
        },
      ],
      rows: [],
    };
  },
  methods: {
    putDemo() {
      addDemo(this.version);
    },
    updateDemo() {
      updateDemo(this.updateId, this.updateVersion);
    },
    deleteDemo() {
      deleteDemo(this.deleteId);
    },
  },
  mounted() {
    API.graphql(graphqlOperation(ADDED_DEMO_SUBSCRIPTION)).subscribe({
      next: ({ _, value }) => {
        this.rows.push(value.data.Demo);
      },
    });
    API.graphql(graphqlOperation(UPDATED_DEMO_SUBSCRIPTION)).subscribe({
      next: ({ _, value }) => {
        console.log("Updated", value.data.Demo);
        this.rows = this.rows.map((el) =>
          el.id === value.data.Demo.id ? (el = value.data.Demo) : (el = el)
        );
      },
    });
    API.graphql(graphqlOperation(DELETED_DEMO_SUBSCRIPTION)).subscribe({
      next: ({ _, value }) => {
        this.rows.splice(
          this.rows.findIndex((item) => item.id === value.data.Demo.id, 1),
          1
        );
      },
    });
  },
  beforeMount() {
    getDemos().then((res) => {
      this.rows = res.getDemos;
    });
  },
};
</script>