Nextjs dyanmic router callback sometimes undefined - next.js

Question

here is my folder stucture
shop
- [categorySlug]
- [productSlug]
- index.tsx
- index.tsx
index.tsx
graphql calling will be
/shop/shoes/nike-1
/shop/jersey/jersey-1
[categorySlug] index.tsx
export function ShopCategoryComponent({ products }): JSX.Element {
const { query } = useRouter();
const router = useRouter();
const categorySlug = hasCategorySlug(query) ? query.categorySlug : undefined;
const viewProductDeatails = useCallback(
(productSlug) => {
router.push(`/shop/${categorySlug}/${productSlug}`);
},
[router]
);
return (
<section>
{products.map((product) => (
<div
key={`${product.id}`}
onClick={() => viewProductDeatails(product.slug)}
>
<h3>{product.name}</h3>
<h3>{product?.$on['SimpleProduct'].price()}</h3>
<img src={product?.$on['SimpleProduct'].image.sourceUrl()} />
</div>
))}
</section>
);
}
export default function ShopCategory() {
const { useQuery } = client;
const { query } = useRouter();
const { products } = useQuery();
const categorySlug = hasCategorySlug(query) ? query.categorySlug : undefined;
const generalSettings = useQuery().generalSettings;
const setProducts = products({
where: {
categoryIn: categorySlug,
},
}).nodes;
return (
<React.Fragment>
<Menu />
<main className='content content-single'>
<ShopCategoryComponent products={setProducts} />
</main>
<Footer copyrightHolder={generalSettings.title} />
</React.Fragment>
);
}
when i click on the image it will then go to the productSlug page to show single product detail, it work sometimes, sometimes it will be undefined, like this.i wonder where i did wrong to cause this ?
/shop/shoes/undefined

Answer 1

it happen because of re-hydration and the categorySlug and productSlug have not get slug and it show undefined. also i mess up my variable categorySlug.
1.change
const categorySlug = hasCategorySlug(query) ? query.categorySlug : undefined;
to
const categorySlug = query.categorySlug
2.add
export function ShopCategoryComponent({ products }): JSX.Element {
const { query, isReady } = useRouter();
const categorySlug = query.categorySlug;
// pre-render page check, show loading if data havet get it.
if (!isReady) {
return (
<div>
<h1>Loading...</h1>
</div>
);
}
}
now everything work fine now. thanks user8566930