0

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;
mait.taim
  • 134
  • 1
  • 12

0 Answers0