How to fetch data using link in Nextjs - reactjs

Question

My data is stored in Mongo Atlas. I can fetch the data (posts) but when I click on the post, it doesn't provide me with the data of that ID. I have created a pages/posts page. I am only able to view the ID of the post due to the code below which is in postlist.tsx and is only passing the id to the next page via its url. I want to be able to view the title and body of the post associated with that particular ID as well:
This is my blogs.tsx
interface PostState{
posts: Post[];
}
export default class PostList extends React.Component <{},PostState> {
state = {
posts: []
};
componentDidMount = () => {
this.getBlogPost();
};
getBlogPost = () => {
axios
.get('/api')
.then(({data}) => {
const reverseData = new Array;
for (let datetime = data.length - 1; datetime >= 0; datetime--) {
reverseData.push(data[datetime]);
}
this.setState({posts: reverseData})
})
.catch((error) => {
alert('Error: there was an error processing your request')
})
}
displayBlogPost = (posts : Post[]) => {
const currentDateTime = new Date();
if (!posts.length)
return null;
return posts.map((post, index) => (
<div key={index}>
<Card>
<Title>
<Link href={`/post?id=${post._id}`} as= .
{`/post/${post._id}`}></Title>
{/* <p>{post.date}</p>
<p>{post.name}</p> */}
<FullName>{`${post.name} |
${dateToString(currentDateTime)}`}</FullName>
<Line />
<Question >{post.body}</Question>
</Card>
</div>
));
}
render() {
return (
<div>
<Container>
<Headers/>
<div className="blog">
{this.displayBlogPost(this.state.posts)}
</div>
</Container>
</div>
);
}
}

Answer 1

First you should create the Post route
pages/post/index.js
import React from 'react'
class Post extends React.Component {
static async getInitialProps({ query }) {
return { query };
}
render() {
return <div>id: {this.props.query.id}</div>
}
}
export default Post
Then create pages/post/[id].js
import Post from './index'
export default Post
Now when you open localhost:port/post/22 or localhost:port/post?id=22 it should show you the number 22.
To link to a post from another page you can make the following link:
<Link href={`/post?id=${id}`} as={`/post/${id}`}>
<a>{title}</a>
</Link>
If that still doesn't work then please show us the code (on github).
If it works then now you can pass an id to post page so you only need to fetch the post. You can do that in getInitialProps
class Post extends React.Component {
static async getInitialProps({query}) {
const post = await axios.get(url, { // make sure the url is full url, no relative urls
params: {
id: query.id
}
})
return { post: post.data }
}
render() {
return (
<pre>
post:{' '}
{JSON.stringify(this.props.post, undefined, 2)}
</pre>
)
}
}