Documentation

Tutorials: Getting User Data

The Component

Now that we have 2 ways to work with the data (via the query or the component), we can attach this to as many components as we want.  
In the Sample Web App we have 3 components using the profile information of the listener.

See the following:

UserMenu
ProfileNavigation
UserProfile

 

UserMenu

The first component using the profile data is the UserMenu. Clicking on the listener icon in the top right corner will open a small menu:

[screen]

The listener icon is the image retrieved from the GraphQL API. Let’s see how this is done.



import { withUserProfile } from '../../graphql/profile/userProfile';

...

const UserMenu = (props) => {
 ...

 const {
   displayName,
   image,
   fallbackUserIconDefaultColor,
   fallbackUserIconSecondaryColor,
 } = props;

 ... 

   

     

       {
         image
         ?
           {displayName}/
         :
           
{fallbackImage(isMenuOpen ? fallbackUserIconSecondaryColor : fallbackUserIconDefaultColor)}

       }
     

      
...

UserMenu.propTypes = {
 isLoading: PropTypes.bool,
 error: PropTypes.string,
 displayName: PropTypes.string,
 image: PropTypes.string,
 fallbackUserIconDefaultColor: PropTypes.string,
 fallbackUserIconSecondaryColor: PropTypes.string,
};

...

export default withRouter(connect(null, mapDispatchToProps)(withUserProfile(UserMenu)))

The provider is imported and will be used as data source for the Component. The component has image and displayName as properties which will be set by the provider as it gets results from the query. The isLoading and error properties will also be set by the provider in order for the component to show error messages to the user and display loading states.

ProfileNavigation

Once you’ve selected ‘My Profile’ from the UserMenu, you are taken to the profile page. The ProfileNavigation component is displayed on the left.

[screen]

Again, only the user image is used from the profile data. Let’s see how this is done.



...
import { withUserProfile } from '../../graphql/profile/userProfile';

const ProfileNavigation = (props) => {
 const {
   image,
   displayName,
   className,
 } = props;

 return (
   

     {displayName}
     
    
       
  • My Profile
    • 
       
  • Thumbs Up
    • 
     

   

 );
}


ProfileNavigation.propTypes = {
 className: PropTypes.string,
 displayName: PropTypes.string,
 image: PropTypes.string,
};

export default withUserProfile(ProfileNavigation);

This example is very similar to the previous one. The provider is imported and will be used as data source for the Component. The component has image and displayName as properties which will be set by the provider as it gets results from the query.

UserProfile

The UserProfile is displayed on the right. This contains the profile information of the listener. Only displayName and bio is used.

[screen]

Let’s see how this is done.



...
import { withUserProfile } from '../../graphql/profile/userProfile';

const UserProfile = (props) => {
 const {
   displayName,
   bio,
   className,
 } = props;

 return (
   

     
{displayName}

     
{bio}

   

 );
}

UserProfile.propTypes = {
 className: PropTypes.string,
 id: PropTypes.string,
 displayName: PropTypes.string,
 bio: PropTypes.string,
};

export default withUserProfile(UserProfile);