blogPost.tsx

    import * as React from "react";
    import { GetBlogPost } from "./__generated__/GetBlogPost.graphql";
    import { useLazyLoadQuery } from "react-relay/hooks";
    import { BlogPostHead } from "./BlogPostHead";
    import { BlogPostBody } from "./BlogPostBody";
    import { graphql } from "react-relay";


    interface BlogPostProps {
      postId: string;
    }

    export const BlogPost = ({ postId }: BlogPostProps) => {
      const { blogPostById } = useLazyLoadQuery<GetBlogPost>(
        graphql`
          query GetBlogPost($postId: ID!) {
            blogPostById(id: $postId) {
              ...BlogPostHead_blogPost
              ...BlogPostBody_blogPost
            }
          }
        `,
        {
          variables: { postId }
        }
      );

      if (!blogPostById) {
        return null;
      }

      return (
        <div>
          <BlogPostHead blogPost={blogPostById} />
          <BlogPostBody blogPost={blogPostById} />
        </div>
      );
    };