In separation of the front and back ends of Rails React, how to find API endpoints and React route-CodePudding

I took over a separate front-end and back-end website, consisting of two back-ends, Ruby on Rails and React. Prior to this, I have always used the MVC framework to make websites, but now the "V" part has become a React repo independently.

Specifically, I have to write a render json: @variable in a Controller#Action, but after this I don't know where the json is transmitted to the front end (React repo)? I don't know how to find the API endpoint.

I heard that this is related to React route? What's this? Where is this written?

The problem is very big, please let me know if you have any recommended teaching articles.

CodePudding user response：

I'm a beginner in rails, I started project rails api react.native on front. Where I find my endpoints to frontend was in one command.

rails routes

which show us some data like:

 new_api_user_session GET    /api/v1/auth/sign_in(.:format)                                                                    devise_token_auth/sessions#new
                    api_user_session POST   /api/v1/auth/sign_in(.:format)                                                                    devise_token_auth/sessions#create
            destroy_api_user_session DELETE /api/v1/auth/sign_out(.:format)                                                                   devise_token_auth/sessions#destroy
               new_api_user_password GET    /api/v1/auth/password/new(.:format)                                                               devise_token_auth/passwords#new
              edit_api_user_password GET    /api/v1/auth/password/edit(.:format)                                                              devise_token_auth/passwords#edit
                   api_user_password PATCH  /api/v1/auth/password(.:format)                                                                   devise_token_auth/passwords#update
                                     PUT    /api/v1/auth/password(.:format)                                                                   devise_token_auth/passwords#update
                                     POST   /api/v1/auth/password(.:format)                                                                   devise_token_auth/passwords#create
        cancel_api_user_registration GET    /api/v1/auth/cancel(.:format)                                                                     devise_token_auth/registrations#cancel
           new_api_user_registration GET    /api/v1/auth/sign_up(.:format)                                                                    devise_token_auth/registrations#new
          edit_api_user_registration GET    /api/v1/auth/edit(.:format)                                                                       devise_token_auth/registrations#edit
               api_user_registration PATCH  /api/v1/auth(.:format)                                                                            devise_token_auth/registrations#update
                                     PUT    /api/v1/auth(.:format)                                                                            devise_token_auth/registrations#update
                                     DELETE /api/v1/auth(.:format)                                                                            devise_token_auth/registrations#destroy
                                     POST   /api/v1/auth(.:format)                                                                            devise_token_auth/registrations#create
           new_api_user_confirmation GET    /api/v1/auth/confirmation/new(.:format)                                                           devise_token_auth/confirmations#new
               api_user_confirmation GET    /api/v1/auth/confirmation(.:format)                                                               devise_token_auth/confirmations#show
                                     POST   /api/v1/auth/confirmation(.:format)                                                               devise_token_auth/confirmations#create
          api_v1_auth_validate_token GET    /api/v1/auth/validate_token(.:format)                                                             devise_token_auth/token_validations#validate_token

for example /api/v1/auth/sign_in is endpoint to register a user. I gave it to frontend developer and works well. If you want to test your endpoints you can use program like Insomnia or Postman with json data in it.

CodePudding user response：

If you are making Rails as backend and React as frontend you need to call Rails API from React. You need to return json from Rails method, you can declare format also in method so if format type is json return as json else return html.You can check confi/routes to know path for method. To check if rails API call is working and how data is getting return you can use postman. Once tested in postman same api with http method (get,put, post etc) and parameter can be passed as API in React.

example

Blockquote

loadTdlists() {
axios
  .get("users/user_list.json")
  .then((res) => {
    this.setState({ tdlists: res.data });
  })
  .catch((error) => console.log(error));

}

Blockquote

here user_list method is define in users controller. you can use full URL also when calling api according to project requirement.