LWC launch URL from apex class

Question

I'm struggling to find the best way to accomplish this - any suggested are appreciated! I have an LWC for a community page that will have a button to launch an external URL. The URL needs to be generated when they push the button from the apex class due to a time sensitive URL generation. I've tried a few different ways and have been unable to get it to launch.

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import getURL from '@salesforce/apex/lwcController.getURL';

export default class NavToHome extends NavigationMixin(LightningElement) {

   navigateToWebPage() {
        // Navigate to a URL

        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: getURL
            }
        },
        true // Replaces the current page in your browser history with the URL
      );
    }
}

HTML:

<template>
    <lightning-card title="NavToHome" icon-name="custom:custom96">
        <lightning-button
            label="Go to Home"
            class="slds-var-m-around_medium"
            onclick={navigateToWebPage}
        ></lightning-button>
    </lightning-card>
</template>

I've kept it pretty basic for demo purposes but this isn't launching the URL that is returned from getURL method of the apex class. Thoughts or better ways to do this? Thanks!

Answer 1

You're close, just get the value then use it:

async navigateToWebPage() {
    // Navigate to a URL
    let url = await getURL();
    this[NavigationMixin.Navigate]({
        type: 'standard__webPage',
        attributes: { url }
    },
    true // Replaces the current page in your browser history with the URL
  );
}

The await keyword waits for the URL to be returned, and the async keyword is necessary in any function that uses await.