mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
21d5aebd53
In this example, we can: - `QueryRenderer` SSR - caching the data - use the feature of `react-relay-network-modern` which is the powerful tool for `relay-modern` I copy the example `with-relay-modern`, but I just modified the code. Some detail are not modified. If you think this example is needed, I will fix those. Otherwise, close this **PR** to let me know this example is not needed.
30 lines
730 B
JavaScript
30 lines
730 B
JavaScript
import React from 'react'
|
|
import { createFragmentContainer, graphql } from 'react-relay'
|
|
import BlogPostPreview from './BlogPostPreview'
|
|
|
|
const BlogPosts = props => {
|
|
return (
|
|
<div>
|
|
<h1>Blog posts</h1>
|
|
{props.viewer.allBlogPosts.edges.map(({ node }) =>
|
|
<BlogPostPreview key={node.id}post={node} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default createFragmentContainer(BlogPosts, {
|
|
viewer: graphql`
|
|
fragment BlogPosts_viewer on Viewer {
|
|
allBlogPosts(first: 10, orderBy: createdAt_DESC) {
|
|
edges {
|
|
node {
|
|
...BlogPostPreview_post
|
|
id
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|
|
})
|