Content

<Content> is a React component which is closely related to <Loop>. They both are convenience components for obtaining data from your API; unlike Loop, Content is for grabbing a singular item.

import Content from 'UI/Content';

...

     <Content type='user' id={14}>
       {
           (user, loading) => {
                  if(loading) {
                      return 'Getting user data..';
                  }
                  
                  if(!user){
                      return 'User was not found.';
                  }
                  
                  return <p>{user.username}</p>;
           }
       }
     </Content>

Primary Content

On pages with primary content, <Content> can be used to directly obtain the primary content object:

import Content from 'UI/Content';

...

     <Content primary>
       {
           (blogPost, loading) => {
                  if(loading) {
                      return 'Getting post..';
                  }
                  
                  if(!blogPost){
                      return 'Post was not found.';
                  }
                  
                  return <h1>{blogPost.title}</h1>;
           }
       }
     </Content>

Includes

Includes are a mechanism in SocialStack for obtaining related data in the same API call. They are a feature of the public API but are exposed via Content too:

    import Content from 'UI/Content';
    
    ...
    
    <Content type='page' id={1} includes={['creatorUser']}>
        {(page, loading) => {
            if(loading){
                // Just an example.
                return 'Loading..';
            }
            
            if(!page){
                return 'Page does not exist';
            }
            
            return <div>
                The page "{page.title}" was created by {page.creatorUser.username}
            </div>;
        }}
    </Content>