Navigate to RecordView with ID parameter from APEX - LWC

Question

I am trying to navigate to the newly createdRecord(from apex) with the following code.

I confirmed, that the Id from apex is passed correctly.

When I "handleClick" for the first time, alert with page not found apears, if I do that again, I am correctly navigated to the record page I want. I think I made a mistake with referencing "this" value..but cant figure it out anyway. Thank you for the help

import { api, LightningElement,track } from 'lwc';
import {NavigationMixin} from 'lightning/navigation';
import getData from '@salesforce/apex/NewAP.getData';
import createARwithPTH from '@salesforce/apex/NewAP.createAPwithPTH';


export default class NewAP extends NavigationMixin(LightningElement) {

//nonrelated code

  handleClick(){
        var recId ="";
        var el = this.template.querySelector('lightning-datatable');
        console.log('1',el);
        var selected = el.getSelectedRows();
        console.log('2',selected);
        createARwithPTH({selectedRows: selected})
            .then(result=>{this.recId=result})
            console.log('3',this.recId);
        this.navigateToRecordViewPage(this.recId);
    }
    navigateToRecordViewPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recId,
                objectApiName: 'Acceptance_Protocol__c',
                actionName: 'view'
            },
            
        });
    }

Answer 1

What is happening is because the createARwithPTH is async work, JavaScript works with Promises to handle this type of work, as we know JavaScript is a single Thread, but this is not the scope of the question.

you have two ways to solve this: The first way, add the navigation call to the promise resolve

  handleClick(){
        var recId ="";
        var el = this.template.querySelector('lightning-datatable');
        console.log('1',el);
        var selected = el.getSelectedRows();
        console.log('2',selected);
        createARwithPTH({selectedRows: selected})
            .then( (result) => {
                this.recId=result;
                console.log('3',this.recId);
                this.navigateToRecordViewPage();
         })
    }
    navigateToRecordViewPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recId,
                objectApiName: 'Acceptance_Protocol__c',
                actionName: 'view'
            },
            
        });
    }

The second way is to await for the promise result:

  async handleClick(){
        var recId ="";
        var el = this.template.querySelector('lightning-datatable');
        console.log('1',el);
        var selected = el.getSelectedRows();
        console.log('2',selected);
        await createARwithPTH({selectedRows: selected})
            .then( (result) => {
                this.recId=result;
         })
        console.log('3',this.recId);
                this.navigateToRecordViewPage();
    }
    navigateToRecordViewPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recId,
                objectApiName: 'Acceptance_Protocol__c',
                actionName: 'view'
            },
            
        });
    }