use swr to fetch data & pass to presentation layer

SWR to fetch data

const ResourceEditWrapper = () => {

  const query = useQuery();

  const classes = useStyles({});

  // Resource
  const {
    resource,
    isLoading: isResourceLoading,
    error: resourceError,
  } = useResource(query.get("id") as string);

  // Categories
  const {
    categories: mappedCategories,
    isLoading: isCategoriesLoading,
    error: categoriesError,
  } = useCategories();

  // CategoryContentAreas
  const {
    categoryContentAreas: mappedCategoryContentAreas,
    isLoading: isCategoryContentAreasLoading,
    error: categoryContentAreasError,
  } = useCategoryContentAreas();

  // Topics
  const {
    topics: mappedTopics,
    isLoading: isTopicsLoading,
    error: topicsError,
  } = useTopics();

  if (topicsError) {
    return <h1>Something went wrong</h1>;
  }
  if (categoryContentAreasError) {
    return <h1>Something went wrong</h1>;
  }

  if (categoriesError) {
    return <h1>Something went wrong</h1>;
  }

  if (resourceError) {
    return <h1>Something went wrong</h1>;
  }

  if (
    resource != null &&
    mappedCategories != null &&
    mappedCategoryContentAreas != null &&
    mappedTopics != null
  )
    return (
      <ResourceEdit
        resource={resource}
        mappedCategories={mappedCategories}
        mappedCategoryContentAreas={mappedCategoryContentAreas}
        mappedTopics={mappedTopics}
      />
    );

  if (
    isResourceLoading ||
    isCategoryContentAreasLoading ||
    isCategoriesLoading ||
    isTopicsLoading
  )
    return (
      <div className={classes.loader}>
        <LinearProgress />
        <LinearProgress color="secondary" />
        <span>
          {" "}
          <Typography variant="h5">Getting information ...</Typography>
        </span>
      </div>
    );
};

export default ResourceEditWrapper;