ApiResponseView - Standard usage

ApiResponse is intended to be used as a container for returning values from API endpoints, but is also useful for any method that can fail, or relies on external services (so may have HTTP issues, etc). ApiResponseView is a Blazor container that consumes an ApiResponse, and modifies the display appropriately, depending on the state of the response.

The ApiResponseView automatically handles HTTP failures, non-authorised requests, general failure and service unavailable cases, meaning you don't have to write boilerplate code.

Sample

When this page loads, it calls out to an external service to get a list of (dummy) users. This has a delay included to show the way the display changes automatically when the data has been received. Try refreshing the page and watch what happens below to see it in action.

Usage

The LoadApiResponse property of the ApiResponseView is set to a method that returns an object of type Task<ApiResponse<T>>. The object of type T is passed as a Context parameter to the Success content of the view, where it can be used to display the data.

While the component is waiting got the method to complete, it displays a loader. Once the method has completed, it changes the display to match the state of the response...

Success

Everything went well, and the ApiResponseView will display the data, which it receives through the Context parameter.

Not found

The requested entity was not found.

Failure

An error occured when calling the method. If this was due to an unauthorised HTTP request, a suitable message is displayed, along with a link to your log-in page. That link is set in the Program.cs file (both client and server if you have a mixed-mode Blazor app). As this sample is from an ancient era, the link is set up in the Startup.cs file (right at the bottom), but the principle is the same.

HTTP failure

An HTTP transport error occured, most likely due to a lack of Internet connection. The user is prompted to check their connection and refresh.

Service unavailable

Useful for when your app is being updated. Shows a message and suggests that the user tries refreshing soon.

If you want to load the data manually (for example if a data grid does its own loading), then you need to set the ManualLoading property to true. See the ApiResponseView - Manual loading page for details.

Overriding the defaults

Any or all of these can be overwritten to suit your own preferences...

On an app-wide basis, meaning that every ApiResponseView will pick them up.

The best way to do this is to add a Blazor component to hold a RenderFragment for each property you wish to override. For example, you could name it MyApiResponseViewConfig.razor, and include code such as...

public static RenderFragment<Yunit> Loader = _ =>@<Loader PrimaryColor="red" SecondaryColor="pink" Text="Hang on, we'll be there soon..." />;

Then, set this as the default for all ApiResponseView components by including the following line in Program.cs (see the note above)...

ApiResponseView.Loader = MyApiResponseViewConfig.Loader;

On an individual basis, in which case only this instance of the component will use it.

In this case, you just include the code you want inside the ApiResponseView markup...

<ApiResponseView>
  @* Markup for <Success> and any other parts goes here *@
  <Loader>
    <h3>Hang on, we'll be there soon..."</h3>
  </Loader>
</ApiResponseView>

The example above uses a simple <h3> tag, but obviously, you can use any markup you like, including the <Loader> component from the Pixata.Blazor package. This component is used by default, but you override the default settings as you wish. See the previous section.

See the source code for this page.