Frontend REST Example

Support
#1

Hello Team,

I struggle to make a REST querry from React Frontend, but is very hard to do it with only several documentation snippets. Could you help me with an example, please?
In services.ts I added this service (based on session_planner example):

type sessionplanner_AddService_addMethod = {
    a:4; 
    b:6; 
}
export var restServices = {
    sessionplanner_AddService:{
        addMethod:(cubaApp: CubaApp, fetchOpts?:FetchOptions)=>(params: sessionplanner_AddService_addMethod)=>{
            return cubaApp.invokeService("sessionplanner_AddService", "addMethod", params, fetchOpts);
        }
    }
};

In the Browser SpeakerList I added a button that calls functionRest.

functionRest=()=>{

  cubaREST.invokeService("sessionplanner_AddService", "addMethod",restServices.sessionplanner_AddService.addMethod)
}


<Button
      htmlType="button"
       onClick={this.functionRest}
        >
        </Button>

(Of course I added Generic REST API and Service addMethod in the Middleware).

The result is this:
image

Pleas advise!

-n

Generic REST API changed?
#2

Hi,
In order to call middleware services via REST API, you need to declare service methods in rest-services.xml project file.

See instructions here: CUBA Studio User Guide
and here: CUBA REST API

If you’ve already created this file and added exposed service method there, can you provide contents of rest-services.xml and service method signature from service interface?

#3

Hi,

Of course. I used a simple sum method (for testing).

<?xml version="1.0" encoding="UTF-8"?>
<services xmlns="http://schemas.haulmont.com/cuba/rest-services-v2.xsd">
    <service name="sessionplanner_AddService">
        <method name="addMethod" anonymousAllowed="true">
            <param name="a"/>
            <param name="b"/>
        </method>
    </service>

and the Service.

package com.company.sessionplanner.service;

import org.springframework.stereotype.Service;

@Service(AddService.NAME)
public class AddServiceBean implements AddService {

    public int addMethod(int a, int b){
        return a+b;
    }

}
#4

OK.
Just to be sure. Is addMethod method declared in the AddService interface?

#5

By the way, why do you call http://localhost:3000 in Postman? (3000 port)

CUBA application by default uses 8080 port.
3000 port is used by the frontend debug server, it only contains compiled frontend static files.

#6

Of course.


package com.company.sessionplanner.service;

public interface AddService {
    String NAME = "sessionplanner_AddService";

    int addMethod(int a, int b);
}
#7

I do not call http://localhost:3000 in Postman. I just see the console.log() - F12.

Can you please help me with an example application (frontent Cuba Rest js and General (Add-on)Cuba Rest), please?
Or debug this (my) example…I want to display something in frontend via backend middleware.

#8

Ah, it’s running React app, it’s not Postman.
What value do you have in .env.development.local file? It contains URL to the CUBA app.

If your CUBA app is running on the default 8080 port, it should contain http://localhost:8080/app/rest/ URL.

Generic REST API changed?
#9

REACT_APP_CUBA_URL=http://localhost:8080/app/rest/

#12

Hi @neutrino,
Could you please clarify, do you experience the error when using react client on dev server (port 3000) or on Tomcat ?

#13

Hi Vlad,

Very good observation.
On port 3000 I have 404 Error (Not found) and on 8080/app-front I have 401 Error ( Unauthorized) - I thought they are the same.However, I found out from this topic Generic REST API changed? - CUBA.Platform that you change somehow Rest Add-on and now shoud I use Base64 with client and password etc.
Can you tell me how can I get acces to backend?

#14

I’ve tried to call

 functionRest=()=>{

    getBasicAuthHeaders("client","secret", "en");

    cubaREST.invokeService("sessionplanner_AddService", "addMethod",restServices.sessionplanner_AddService.addMethod)

…but doesn’t work.

#15

Hi,

If you do not designate the service method as available for anonymous (e.g. <method name="addMethod" anonymousAllowed="true">) you should log-in user first. Here is a brief example:

export const cubaREST = initializeApp({
  name: "scr",
  apiUrl: CUBA_APP_URL,
  restClientId: REST_CLIENT_ID,
  restClientSecret: REST_CLIENT_SECRET,
  storage: window.localStorage,
  defaultLocale: "en"
});

...
cubaREST.login('username', 'password').then(() => {
    cubaREST.invokeService("sessionplanner_AddService", "addMethod",restServices.sessionplanner_AddService.addMethod)
});