sample medium UiAvatar.tsx

uiavatar.tsx

import React, { useContext, useCallback } from 'react'
import { useQuery } from 'react-apollo'
import { SomeEntity } from 'dh-apollo-entities'
import { UiAvatar } from 'dh-react-ui'

import { OurContextAPI } from '@/context'

const SmartAvatar = (props) => {
    const { data, loading } = useQuery(SomeEntity.req, { variables: { d: props.d } })
    const { Link, generateContextLinks } = useContext(OurContextAPI)
    
  return loading ?
    <UiAvatar placeholder /> :
    (
      <Link {...generateContextLinks()}>
        <UiAvatar
          {...data}
        />
      </Link>
    )
}

export default SmartAvatar