Small SAP Talk. About ReactJS and Calling an oData Service

Anyone involved in the traditional process of application development using the UI5 framework is likely familiar with the following sequence of steps:

• Direct development of the application in SAP WebIDE
• Deployment of the application to the SAP Application Server (also via SAP WebIDE)
• Running the application on the SAP Application Server to test it or simply see what the result looks like
• Somewhere in between, there must also be a mandatory step involving git

All in all, it’s a fairly straightforward sequence. However, if you're developing an application with ReactJS, you can make an oData service call and retrieve data while running the app locally—on the same machine it’s being developed (i.e., localhost). In this case, deployment to the application server is not mandatory. Still, there are some nuances.

Let’s look at an example where an oData service call is made using the Fetch library, with the app running on localhost:

componentDidMount() {
    fetch(
      "http://vhcala4hci:50000/sap/opu/odata/SAP/ZREACT_APP_SRV/employeeSet?$format=json"
    )
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            results: result.d.results,
            isLoaded: true,
          });
        },
        (error) => {
          this.setState({
            isLoaded: false,
            error,
          });
        }
      );
  }

The following video snippet shows the result of such a call.

There are excellent resources explaining what CORS is.

See: Cross-Origin Resource Sharing (CORS)
CORS is an HTTP-header based mechanism that allows a server to indicate which origins (domain, scheme, or port) other than its own are permitted to access its resources. CORS also involves a “preflight” request by the browser to check if the server allows the actual request. In the preflight, the browser sends headers indicating the intended HTTP method and headers.

At first glance, it may seem that accessing an oData service is impossible until the application is deployed to an application server. But let’s go further.

In my ReactJS project, I define the path to the oData service using a proxy directive inside the package.json file.

See: package.json

Now the above code can be modified to reference only the required entitySet name in the request, instead of the full path to the service:

componentDidMount() {
    fetch("/employeeSet?$format=json")
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            results: result.d.results,
            isLoaded: true,
          });
        },
        (error) => {
          this.setState({
            isLoaded: false,
            error,
          });
        }
      );
  }

Testing it…

Everything you need to know about the Small SAP Talk series is described in the following note:

See: Small SAP Talk