BlogPostHead.tsx

    import * as React from "react";
    import { useFragment } from "react-relay/hooks";
    import { graphql } from "react-relay";
    import {
      BlogPostHead_blogPost$key, BlogPostHead_blogPost
    } from "./__generated__/BlogPostHead_blogPost.graphql";
    import { BlogPostAuthor } from "./BlogPostAuthor";
    import { BlogPostLikeControls } from "./BlogPostLikeControls";

    interface BlogPostHeadProps {
      blogPost: BlogPostHead_blogPost$key;
    }

    export const BlogPostHead = ({ blogPost }: BlogPostHeadProps) => {
      const blogPostData = useFragment<BlogPostHead_blogPost>(
        graphql`
          fragment BlogPostHead_blogPost on BlogPost {
            title
            coverImgUrl
            ...BlogPostAuthor_blogPost
            ...BlogPostLikeControls_blogPost
          }
        `,
        blogPost
      );

      return (
        <div>
          <img src={blogPostData.coverImgUrl} />
          <h1>{blogPostData.title}</h1>
          <BlogPostAuthor blogPost={blogPostData} />
          <BlogPostLikeControls blogPost={blogPostData} />
        </div>
      );
    };