I am trying to SSR a dnamiy page and it doesn't work. The props as well as the query parameter in the getInitialProps method are always empty, and I can't grasp how that's possible.
The code below, belongs to the file located in pages/products/[id].tsx. When I access a url directly or I visit it using a Link like such:
<Link href="/products/[id]" as={`/products/${this.state.item.id}`}>
Nothing happens. Would someone please explain me where that behavior is coming from?
import { Component } from "react";
import { useRouter } from 'next/router';
import { Article } from "../../interfaces/article.interface";
import { OverviewItem } from "../../components/shop/overview/overview-item/overview-item";
interface ProductItemPageProps {
item: Article
other: Article[];
}
const ProductItemPage = (props: ProductItemPageProps) => {
console.log(props);
const router = useRouter()
return (
<div>
<OverviewItem item={props.item}></OverviewItem>
<p>TTest</p>
</div>
)
}
ProductItemPage.getInitialProps = async ({query}) => {
console.log("ProductItemPage getInitialprops");
const { id } = query;
const graphqlQuery = {
query: `{article(id:${id}) {id name image price} articles(last:3) {id name image price}}`
};
const stringifiedQuery = JSON.stringify(graphqlQuery);
console.log('Query', stringifiedQuery);
const res = await fetch(`http://localhost:8888/graphql`, {
method: 'POST',
mode: 'cors',
body: stringifiedQuery
});
const arr = [];
var item = {}
var other = [];
try {
const data = await res.json();
item = data.data.article;
other = data.data.articles;
console.log("AAAAAA", data);
} catch (exception) {
console.log("Error", exception);
item = {
"aaaah": "AAAAAAAAASDASD" // EVEN THIS DOESN'T SHOW IN PROPS
};
}
return {
item,
other
}
}
export default ProductItemPage;