[Fixed] Refactor Angular Services to Call Function App instead of WebApi

Issue

I’m refactoring part of an Angular app to communicate with an Azure Function App instead of a classic WebApi.

WebApi is very Standard Like below.

[Route("[controller]/[action]")]
public class WebApiController : BaseController
{     
    [HttpGet]
    public async Task<IActionResult> GetSomething(int id)
    {
        return Ok();
    }
}

And is called via Angular like below and produces a request like this: http://localhost:4000/WebApi/GetSomething?id=10

public getSomething(id: number) : Observable<Array<Data>> {
    return this.http.get<Array<Data>>(ApiEndpoints.products.getSomething, { params: { id: id.toString() }});
}

With the new Function App backend Api looks like this.

public class FunctionAppController : FunctionService
{
    [FunctionName("GetSomething")]
    public async Task<IActionResult> GetSomething(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "GetSomething/{id}")] HttpRequest req, ILogger log, long id)
    {
        return Ok();
    }
}

When Calling the Function app I receive a 404 as it expect a request looking like this: http://localhost:4000/WebApi/GetSomething/10

I can got through all of the entire Angular app and update Services to look like below but this would be a a rather crude solution.

public getBlockHeadersFromTop(id: number) : Observable<Array<Data>> {
    return this.http.get<Array<Data>>(ApiEndpoints.products.getSomething + "/" + id.toString());
}

So my Question is if there are any simple and elegant solution to either format the url structure in Angular services without changing their original implementation or change the backend to expect incoming url’s in query string form?

Solution

For this problem, I’m not clear why did you set the Route in your function with GetSomething/{id}.

If you want the function expect a request like: http://localhost:4000/WebApi/GetSomething?id=10. You just need to change the Route to GetSomething. And then when you request the function with url http://localhost:4000/WebApi/GetSomething?id=10, you can use string id = req.Query["id"]; to get the query parameter in your function code.