I am attempting an application in JHipster 7.0.1 (Azul JDK 11) and ReactJS as the front-end. I have 2 entities in my JDL - Domain and BadgeCategory that are related as shown below I want to be able to display all the BadgeCategories for a particular Domain in the Domain Detail screen. For this, I created a new method in

JHipster React Show List Of One Entity in Details Screen of Another Related Entity

I am attempting an application in JHipster 7.0.1 (Azul JDK 11) and ReactJS as the front-end.

I have 2 entities in my JDL – Domain and BadgeCategory that are related as shown below

relationship OneToMany {
    Domain{badgeClass required} to BadgeCategory{domain(name) required}

I want to be able to display all the BadgeCategories for a particular Domain in the Domain Detail screen.

For this, I created a new method in the repository BadgeCategoryRepository.java

@Repository
public interface BadgeCategoryRepository extends JpaRepository<BadgeCategory, Long> {
    List<BadgeCategory> findByDomainId(Long id);
}

And then added a new endpoint in BadgeCategoryResource.java

@GetMapping("/badge-categories-domain/{id}")
public ResponseEntity<List<BadgeCategory>> getAllBadgeCategoriesForDomain(@PathVariable Long id) {
    log.debug("REST request to get BadgeCategories for Domain : {}", id);
    List<BadgeCategory> badgeCategory = badgeCategoryRepository.findByDomainId(id);
    return ResponseEntity.ok().body(badgeCategory);
}

Now coming to the React part, I added a constant in badge-category.reducer.ts

export const getEntitiesForDomain = createAsyncThunk(
  'badgeCategory/fetch_entity_list_for_domain', 
  async (id: string) => {
    const requestUrl = `api/badge-categories-domain/${id}`;
    alert(JSON.stringify(axios.get<IBadgeCategory[]>(requestUrl)));
    return axios.get<IBadgeCategory[]>(requestUrl);
  });

Then I am using this reducer in the Domain Detail screen component domain-detail.tsx

import { getEntity as getBadgeCategory, getEntitiesForDomain } from '../badge-category/badge-category.reducer';

  const domainEntity = useAppSelector(state => state.domain.entity);
  const badgeCategoryList = useAppSelector(state => state.badgeCategory.entities);

  useEffect(() => {
    dispatch(getEntity(props.match.params.id));
    dispatch(getEntitiesForDomain(props.match.params.id));
  }, []);

I am expecting the constant badgeCategoryList to contain the list of all badge categories for the domain which is being referred to in the domain-detail screen. But I get nothing in return.

On checking the flow, I see that the endpoint is getting hit and the response is being produced by the Java code, but the UI code is not able to consume it.

What am I missing here that is causing this issue?

The Swagger docs show expected response from the Java code

Answer

So the issue was with the new API call not being registered with the slice section in the reducer. I had to do the following addition to the slice and it works like a charm

.addMatcher(isFulfilled(getEntitiesForDomain), (state, action) => {
   return {
     ...state,
     loading: false,
     entities: action.payload.data,
   };
})

Advertisement

Answer