// /types/BlogPost.ts
 
// Turn blog posts from your CMS into
// a GraphQL object type & query
export const BlogPostNode = node<BlogPostSource>({
  name: 'BlogPost',
  load: async (ids) => fetchBlogPosts(ids),
  fields: (t) => ({
    // Exose a field as-is
    title: t.exposeString('title'),
    // Rename a field
    content: t.exposeString('content_html'),
    // Connect it to other data
    author: t.field({
      type: UserNode,
      resolve: (blogPost) => blogPost.author_id
    })
  }),
})

// /components/BlogPost.tsx
 
const BlogPostFields = graphql(`
  fragment BlogPost_Fields on BlogPost {
    id
    title
    content
    author {
      # Combine fragments from other components to fetch the data they need
      ...UserCard_Fields
    }
  }
`)
 
export const BlogPost = (props: {
  blogPost: FragmentType<typeof BlogPostFields>
}) => {
  const blogPost = useFragment(BlogPostFields, props.blogPost)
 
  return (
    <div>
      {/* Fully type-safe, component-level data fetching */}
      <UserCard user={blogPost.author} />
      <h1>{blogPost.title}</h1>
      <RichText>{blogPost.content}</RichText>
    </div>
  )
}