[SOLVED] Why isn't my helper collection query not reflecting in the html template?

Following the tutorial on how to "Write an API", I seem to have gotten stuck and can't move beyond how to get the generated API Key to display in the template.

I have a query APIKeys.find().fetch() in the helper that should reflect correctly in the html template, but it doesn't. I have spent hours looking through my code and have failed to notice any errors in my code.

I am not that new to Meteor which makes it all the more annoying!

Kindly help!

Find below the template code: /client/main.html

<template name="apiKey">
<div class="row">
  <div class="col-xs-12 col-sm-6">
  <h4 class="page-header">Your API Key</h4>
  <p>To gain access to the Pizza API, use the following API Key. 
     Make sure to keep it super safe! <strong>If you'd like to
     generate a new key, click the "refresh" icon on the field
     below</strong>.</p>

  <label class="sr-only" for="apiKey">Your API Key</label>
    <div class="input-group">
    <input type="text" readonly class="form-control" id="apiKey" placeholder="API Key" value="{{apiKey}}">
    <div class="input-group-addon regenerate-api-key"><span class="glyphicon glyphicon-refresh"></span></div>
  </div>
</div>

In the template above, NOTHING is rendered in the template under value="{{apiKey}}". I dont understand why this is.

Find below my helpers code: /client/main.js

import '../imports/api/tasks.js';

Template.apiKey.helpers({
apiKey: function() {
        var apiKey = APIKeys.findOne();

        if ( apiKey ) {
            return apiKey.key;
            console.log("Sucessful");
        }
        else {
            console.log("Failed! Can't find: APIKeys.findOne()");    
        }
     }

});

The helper code above renders this in the console: Failed! Can't find: APIKeys.findOne(). Further, when I query APIKeys.find().fetch() in the console, I get this:

[]

Find below my onCreated code: /client/main.js

Template.apiKey.onCreated(function(){
  console.log("Your in onCreated!");
  this.subscribe( "APIKey" );
});

The onCreated code above renders this in the console: Your in onCreated!.

Find below my events code that is triggered to generate a new API Key: /client/main.js

import '../imports/api/tasks.js';

Template.apiKey.events({
'click .regenerate-api-key': function( ){
        var userId = Meteor.userId();
        confirmRegeneration = confirm( "Are you sure? This will 
        invalidate your current key!" );

       if ( confirmRegeneration ) {
          Meteor.call( "regenerateApiKey", userId, function( error, response ) {
       if ( error ) {
          alert( error.reason, "danger" );
       }
       else {
           alert( "All done! You have a new API key: " +response );
           console.log("Response is: " +response);
      }
     });
    }
  }
});

The events code above renders a popup box with: All done! You have a new API key: 0. Also the console renders: Response is: 0.

Find below the regenerateApiKey method code /server/main.js

Meteor.methods({
  regenerateApiKey: function( userId ){
    check( userId, Meteor.userId() );

    var newKey = Random.hexString( 32 );
    console.log(">>>: " +newKey);

    try {
      var keyId = APIKeys.update( { "owner": userId }, {
        $set: {
          "key": newKey
        }
      });
      console.log(">>> newKey : " +keyId);
      return keyId;

    } catch(exception) {
        console.log("FAILED UPDATE")
      return exception;
    }
  }
});

The method code above renders the below in the terminal:

>>>: af3233a999308e39f9471b790e121cf5
>>> newKey : 0

I have narrowed the issue in the code down to this. The keyId variable being equal to "0" suggests that the APIKeys collection isn't getting updated. Can anyone explain why this is happening?

I have included further information in hope that it will help.

Find below the code where i subscribe /client/main.js

Router.route('/apiKey', {
 template: 'apiKey',

 waitOn: function(){
        return Meteor.subscribe('APIKey');          
    }

});

Find below the code where I publish /server/main.js

Meteor.publish( 'APIKey', function(){
  var user = this.userId;
  var data = APIKeys.find( { "owner": user }, {fields: { "key": 1 } } );

  if ( data ) {
        console.log("User: " +user+ " data is: " +data);
        console.log("Was able to find data in Publish APIKey!");
        console.log(APIKeys.find().fetch());
    return data;
  }
  return this.ready();
});

The publish code above renders the below in the terminal:

User: xELzNtMQp7u9FpZib data is: [object Object]
Was able to find data in Publish APIKey!
[]

Find below the code where I declare the collection imports/api/tasks.js

import { Mongo } from "meteor/mongo";
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

global.APIKeys = new Meteor.Collection("apiKeys");


/*
* Allow
*/

APIKeys.allow({
  insert: function(){
    // Disallow inserts on the client by default.
    return false;
  },
  update: function(){
    // Disallow updates on the client by default.
    return false;
  },
  remove: function(){
    // Disallow removes on the client by default.
    return false;
  }
});

/*
* Deny
*/

APIKeys.deny({
  insert: function(){
    // Deny inserts on the client by default.
    return true;
  },
  update: function(){
    // Deny updates on the client by default.
    return true;
  },
  remove: function(){
    // Deny removes on the client by default.
    return true;
  }
});