Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment