1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-data-prefetch/pages/article.js

68 lines
1.8 KiB
JavaScript
Raw Normal View History

import { Component } from 'react'
import fetch from 'isomorphic-unfetch'
import { format } from 'url'
export default class Article extends Component {
static async getInitialProps ({ req, query, pathname, isVirtualCall }) {
const url = format({ pathname, query })
// if we're not running server side
// get the props from sessionStorage using the pathname + query as key
// if we got something return it as an object
if (!req) {
const props = window.sessionStorage.getItem(url)
if (props) {
return JSON.parse(props)
}
}
// fetch data as usual
const responses = await Promise.all([
fetch(`https://jsonplaceholder.typicode.com/posts/${query.id}`),
fetch(`https://jsonplaceholder.typicode.com/posts/${query.id}/comments`)
])
const [article, comments] = await Promise.all(
responses.map(response => response.json())
)
const user = await fetch(
`https://jsonplaceholder.typicode.com/users/${article.userId}`
).then(response => response.json())
const props = { article, comments, user }
// if the method is being called by our Link component
// save props on sessionStorage using the full url (pathname + query)
// as key and the serialized props as value
if (isVirtualCall) {
window.sessionStorage.setItem(url, JSON.stringify(props))
}
return props
}
render () {
const { article, comments, user } = this.props
return (
<div>
<h1>{article.title}</h1>
<div>
<a href={`mailto:${user.email}`}>{user.name}</a>
</div>
<p>{article.body}</p>
<ul>
{comments.map(comment => (
<li key={comment.id}>
{comment.body}
<br />
By <strong>{comment.name}</strong>
</li>
))}
</ul>
</div>
)
}
}