Useful graphQLDefaults package for use with vue-apollo or apollo client

[emahuni]

This small utility actually makes writing my code soo much error free and simple to implement vue-apollo queries without thinking too much about defaults. Remember what you wrote in documentation:

You can initialize the property in your vue component's data hook:

This is that on steroids based on the query to be performed.

I am going to publish it some time soon, but I think since you understand Graphql better than me it would be much better if you have a look at it and add to it and even include it with vue-apollo. Right now it handles queries, aliases, fragments etc. I am handling each graphql specification and sort of render its intended response and I know I have not covered everything coz what I have not covered have not used yet. But this just works for everyday basic queries and not everything Graphql.

Here is what it does and its general idea:

• under normal circumstances the component below should not run coz it encounters undefineds.
• the package creates default js objects based on the given graphql query
• for the following query:

query customerPersonalDetailsQ ($id: ID!) {
   customer(id: $id){
      id
      profile {
         firstname
         lastname
         middlename
      }
   }
}

• it produces something like the following:

{ 
   customer: {
         id: null,
         profile: {
            firstname: "",
            lastname: "",
            middlename: ""
         }
   }
}

which can then be used in a vue template without writing it manually, all you need is to create the query and give it to the package.

In my vue components i can do this:

<template>
     <div>
        Firstname: <input
          v-model="customer.profile.firstname"
        />

        Lastname: <input
          v-model="customer.profile.lastname"
        />
     </div>

      <div>
        Middlename: <input
          v-model="customer.profile.middlename"
        />
      </div>
</template>

<script>
import { customerPersonalDetailsQ } from './queries/customerQ.graphql';

// get app schema (This is done once in the main app and the next 3 lines
// shouldn't be in individual components)
import { genTypesDefinitionsMaps, graphQLDefaultsVueMixin } from 'graphql-defaults';
import typeDefs from './app/schema.graphql';
// now generate type defaults for graphql-defaults
genTypesDefinitionsMaps(typeDefs);



export default {
  data() {
    return {
      customerId: 3,
      customer: {} // notice there is no profile prop here, the above template shouldn't work
    }
  },

  // I am also doing this once as a global mixin
  mixins: [graphQLDefaultsVueMixin],

  created () {
      // this is where the magic happens, generate defaults based on the intended query
      this.customer = this.genGraphQLDefaults$(customerPersonalDetailsQ).customer;
  },

  apollo: {
      customer: {
        query:     customerPersonalDetailsQ,
        variables() {
          return {
            id: this.customerId,
          }
        },
        skip() {
           return !this.customerId;
        },
        update ({ customer }) {
          // merge the returned data with defaults we generated at creation (cover null holes)
          return this.mergeWithDefaults$('customer', customer); 
        },
      },
    },
}
</script>

As you can see, the customer.profile.firstname is a field being used without regard to it being successfully fetched or not, or even before fetching anything. That should just throw an error. V-model doesn't work with undefined nor will it work it even reach vue coz it'd have thrown already since profile is undefined (Error: firstname of undefined). Here the component simply works because the package is taking care of the defaults. The component is not checking or hiding anything. The developer concentrates on the component without guarding it with v-if's or other proxy objects in the component to make it work. So if there is data from the server it displays it, if there is nothing it displays empty input fields. Fill in the fields, add mutating operation and a save button and the the component just works without putting any more code etc. The same code will work for updates or a new record.