Gutenberg Page Template Switcher (Not working)

gutenberg-page-template-switcher-not-working.js

import gql from 'graphql-tag'
import { client } from '../utils/apollo-client'
const { parse } = wp.blocks;
const { select, subscribe, dispatch } = wp.data;
const GET_PAGE_BLOCK_TEMPLATE = gql`
  query GET_PAGE_BLOCK_TEMPLATE($id: ID!, $template: String) {
    page( id: $id ) {
      blockTemplate( pageTemplate: $template )
    }
  }
`;

const MUTATION_PERSIST_BLOCK_TEMPLATE = gql`
  mutation PERSIST_BLOCK_TEMPLATE( $id: ID!, $clientMutationId: String!, $template: String!, $content: String! ) {
    updatePage( 
      input: {
        id:$id,
        clientMutationId: $clientMutationId
        blockTemplate: {
          pageTemplateSlug: $template,
          content: $content
        }
      } 
    ) {
      clientMutationId
      page {
        blockTemplate( pageTemplate: $template )
      }
    }
  }
`;

class PageTemplateSwitcher {

  constructor() {
    this.prevTemplate = null;
    this.template = null;
    this.content = null;
  }

  init() {

    subscribe( () => {
      const newTemplate = select( 'core/editor' ).getEditedPostAttribute( 'template' );
      if ( newTemplate && newTemplate !== this.template ) {
        this.prevTemplate = this.template;
        this.template = newTemplate;
        this.content = select( 'core/editor' ).getEditedPostAttribute( 'content' );
        console.log( this.content );
        if ( this.prevTemplate && this.content ) {
          this.saveTemplateContent( this.prevTemplate, this.content );
        } else {
          this.changeTemplate();
        }
      }
    } );

  }

  saveTemplateContent( template, content ) {

    const postType = select( 'core/editor' ).getEditedPostAttribute( 'type' );
    const id = select( 'core/editor' ).getEditedPostAttribute( 'id' );

    if ( postType && id ) {
      const globalId = postType && id ? btoa(postType + ':' + id) : null;

      console.log( 'mutateTemplateContent' );
      console.log( template );
      console.log( content );

      client.mutate({
        mutation: MUTATION_PERSIST_BLOCK_TEMPLATE,
        variables: {
          id: globalId,
          clientMutationId: 'UpdateBlockTemplate',
          template: template,
          content: content
        },
        options: {
          fetchPolicy: 'network-only'
        }
      }).then(
        result => {
          console.log('mutation result');
          console.log(result);
          this.changeTemplate();
        }
      );
    }
  }

  changeTemplate() {

    console.log( 'changeTemplate' );

    const { resetBlocks, editPost, synchronizeTemplate } = dispatch('core/editor');
    const postType = select( 'core/editor' ).getEditedPostAttribute( 'type' );
    const id = select( 'core/editor' ).getEditedPostAttribute( 'id' );

    if ( postType && id ) {

      const globalId = postType && id ? btoa( postType + ':' + id ) : null;

      client.query({
        query: GET_PAGE_BLOCK_TEMPLATE,
        variables: {
          id: globalId,
          template: this.template
        },
        options: {
          fetchPolicy: 'network-only'
        }
      }).then( result => {

        console.log( result );
        let content = null;

        if ( result.data && result.data.page && result.data.page.blockTemplate ) {
          content = result.data.page.blockTemplate;
          console.log( 'edit content');
          console.log( content );
          editPost({content: content});
        }

        return content;

      });

    }

  }
}

new PageTemplateSwitcher().init();