Vue.js with Apollo (vue-apollo & apollo boost)

As they say in Norfolk, “Fuck-a-duck”.

How long to work out that there is a naming convention for the returned result of an Apollo query? Yes I did read the docs but missed this little beauty.

Please note that a common beginner’s mistake is to use a data name different from the field name in the query…

https://apollo.vuejs.org/guide/apollo/queries.html#name-matching

Long story short, I needed to call an Apollo query and manipulate the returned object. I did not want to use the Apollo component inside a template.

Okay so not to waste time when I get back to this….

import { ORGANISATION_USERS } from "@/lib/graphs/organisationUsers";

export default Vue.extend({
  name: "user-info-report",
  components: { DataTable },
  data: () => ({
    loading: false,
    error: false,
    Organisation: {} as {}
  }),
  computed: {
    orgId(): string {
      return this.$store.getters["Organisation/selected"] as string || "";
    }
  },
  apollo: {
    OrgUsers: {
      query: ORGANISATION_USERS,
      variables(): object { // Note, defining return type
        return { id: this.orgId }
      },
      loadingKey: 'loading',
      update({ Organisation }) {
        this.Organisation = doMagicFormatting(Organisation);
      },
      skip(): boolean {
        return !this?.orgId // Do not run this query if the variable is null or undefined!!!
      }
    }
  }
});
</script>

The template looks like

<template>
  <v-card>
    <data-table :data="Organisation" :loading="loading" />
  </v-card>
</template>

The query is written like

import gql from 'graphql-tag';

export const ORGANISATION_USERS = gql`
  query OrganisationUsers($id: String!) {
    Organisation(id: $id) {
      name
      users {
        firstName
        lastName
        cohorts {
          cohortId
          title
          learningJourney {
            title
            ...
            ...
            ...
            ...
          }
        }
      }
    }
  }