Integrating with React APIs

This document provides information on integrating Aptify e-Business with React APIs. This integration allows Aptify e-Business users to utilize React-based components and services, enabling modern front-end capabilities for Aptify applications.

Below are the topics covered in this article:

Connecting React to Aptify APIs

To connect React with the Aptify API, we have developed a common API utility for executing API requests. Our application utilizes Axios to manage API calls. For making these service calls, we advise using the GET, POST, PATCH, and DELETE requests specified in "src/api/APIClient.js". They are as follows:

_get - performs axios.get
_post - performs axios.post
_patch - performs axios.patch
_delete - performs axios.delete

Below is an example of using POST request:
await _post("/v1/ShoppingCarts/Checkout/CreditCard", data, optionalHeaders);

The root service path is configured in the ebconfig.json as shown in below screen shot.

 

Handling Cross-site request forgery (CSRF)

The API client automatically handles the CSRF headers for the request methods—POST, PATCH, DELETE—that require CSRF protection. Therefore, it is not necessary to explicitly pass or invoke CSRF when making these requests.

Handling Authentication

In React, there is no separate process to handle authentication. Once you log into the application as an e-Business web user, you receive an authentication token from the API as Response cookies. This token is then sent with every subsequent request as a Request cookie, which is handled by the browser automatically. Similarly, tools like Postman also handles this cookie automatically.

Using async/await keywords

For any async operation like calling an API, we recommend using the async/await keywords.
Just as with any asynchronous method that performs an asynchronous operation, we must declare the function as 'async'.
Similarly, we need to user await keyword for any action which is expected to return a promise.
We recommend using await keyword for any API call using our utility.
Any action which needs to be performed on Success/Error of those calls can be handled using .then() and .catch() respectively. 

API error handling

Errors from APIs, such as a failed Axios request, are captured here. The request is then rejected, and the error details are forwarded to the calling component. To handle this, you should add code within the try-catch block, ensuring the error is caught and handled in the catch block.


Debugging

Debugging in JavaScript is developer-specific and can be performed using the developer tools in browsers like Chrome, Mozilla Firefox, Edge, Safari, or in any IDE such as VS Code. Moreover, developers can enhance their experience by installing React-specific extensions in their browsers. For instance, React Developer Tools is a useful extension, and Redux DevTools is another, which allows developers to inspect the Redux State and manage state-related tasks more efficiently.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.