0

I have a well functioning Azure Function App running multiple http triggered functions that provide JSON payloads.

I am trying to call a specific function from my Blazor WASM hosted on Azure Static Web App. I have linked the Function App to the Static Web App and all functions are visible in the Static Web App.

The Function App name displayed in the Static Web Apps Functions blade is my-existing-function-appand in the name list all functions are formatted: my-existing-function-app/GetMyStuff, my-existing-function-app/SetMyStuff, etc

The original uri for the function looks like this: https://my-existing-function-app.azurewebsites.net/api/GetMyStuff?code=ASDFkt5346345ywSDGSTy45734gowjgwWERT==. Calling that endpoint delivers my data as expected.

In my Blazor App I can activate the original endpoint when debugging locally by running this line: mystuff = await Http.GetFromJsonAsync<MyStuff[]>('https://my-existing-function-app.azurewebsites.net/api/GetMyStuff?code=ASDFkt5346345ywSDGSTy45734gowjgwWERT==');

My Static Web App url looks like this: https://red-sea-123.azurestaticapps.net

I have followed the documentation found here: https://learn.microsoft.com/en-us/azure/static-web-apps/functions-bring-your-own

According to the documentation it is a bit unclear, what I should write here: mystuff = await Http.GetFromJsonAsync<MyStuff[]>(HERE)

I have tried different variations like 'api/GetMyStuff', 'my-existing-function-app/GetMyStuff' and 'my-existing-function-app/api/GetMyStuff', but none of them get access to the endpoint. It is clear from the browsers developer console, that i get some error page back.

How should I construct the HERE string in my call?

Axel Andersen
  • 954
  • 1
  • 6
  • 18
  • `'my-existing-function-app/GetMyStuff'` seems to be the right notation. I find that it redirects me to my index.html in my Blazor app. If I add an exclusion for the function in my Blazor app, I get a 404. Do I need to tell Blazor how to redirect the call? – Axel Andersen Feb 25 '22 at 06:37
  • Calling the function directly with `'https://my-existing-function-app.azurewebsites.net/api/GetMyStuff?code=ASDFkt5346345ywSDGSTy45734gowjgwWERT==`' now works after excluding the function from redirection to index.html, but I do not think that is the way it is supposed to work. – Axel Andersen Feb 25 '22 at 06:55

1 Answers1

0

Please check if the below steps for adding the await Http GetFromJsonAsync Method in the Blazor App and helps to workaround:

According to the documentation it is a bit unclear, what I should write here: mystuff = await Http.GetFromJsonAsync<MyStuff[]>(HERE)

Here is an article contains about the calling Azure Function App from the Blazor WASM.

This is the code where you have to include your await Http GetFromJsonAsync operation in the razor app:

@page "/covidfaq"
@inject HttpClient Http

<div class="d-flex justify-content-center">
    <img src="../Images/COVID_banner.jpg" alt="Image" style="width:80%; height:300px" />
</div>
<br />
<div class="d-flex justify-content-center">
    <h1>Frequently asked Questions on Covid-19</h1>
</div>
<hr />

@if (questionList == null)
{
    <p><em>Loading...</em></p>
}
else
{
    @foreach (var question in questionList)
    {
        <div class="card">
            <h3 class="card-header">
                @question.Question
            </h3>
            <div class="card-body">
                <p class="card-text">@question.Answer</p>
            </div>
        </div>
        <br />
    }
}

@code {

    private FAQ[] questionList;

    protected override async Task OnInitializedAsync()
    {
        questionList = await Http.GetFromJsonAsync<FAQ[]>("https://faqfunctionapp20200611160123.azurewebsites.net/api/covidFAQ");
    }

    public class FAQ
    {
        public string Id { get; set; }
        public string Question { get; set; }
        public string Answer { get; set; }
    }
}

Inside the OnInitializedAsync method, the Azure Function app API Endpoint is hitting and the returned data stored in questionList array type variable.

Please visit the above article for more information.