Fetch call is not a function when navigating back from slug page in Nextjs

17 Views Asked by At

I have the following component which renders a list of properties, with each one clickable to an individual slug page with more details about the chosen property:

app > for-sale > page.jsx

'use client'

import { ArticleCardFooter } from "@/components/ArticleCardFooter";
import { Container, Grid } from '@mantine/core';
import datasource from "../../datalayer";
import Pagination from "@/components/Pagination";

const ForSalePropertiesPage = async () => {
    const { properties, pagination } = await datasource.getProperties(5);

    return (

        <Container>
            <Grid>
                {properties?.map((property, index) => (
                    <Grid.Col key={index} span={{ base: 12, sm: 6, lg: 4 }}>
                        <ArticleCardFooter key={index} property={property} />
                    </Grid.Col>
                ))}
            </Grid>

            <Pagination href='/for-sale' page={page} pageCount={pagination?.pageCount} />

        </Container >
    );
};

export default ForSalePropertiesPage

Everything on this page works as expected, and when hitting the page for the first time, properties load as expected. However, the issue occurs when navigating from a slug page:

app > for-sale > [slug] > page.jsx

import { Button, Container } from '@mantine/core';
import datasource from '../../../datalayer';
import { notFound } from 'next/navigation';
import Link from 'next/link';

const PropertyDetailsPage = async ({ params: { slug } }) => {
    const property = await datasource.getProperty(slug);

    if (!property) {
        notFound();
    }

    return (
        <Container>
            <Link href='/for-sale'>
                <Button variant='outline'>Back to results</Button>
            </Link>
            <h1>
                {property.addressLineOne}
            </h1>
            <h2>{property?.price}</h2>
        </Container>
    );
};


export default PropertyDetailsPage;

Again, this component renders and behaves as expected, but when I use the button to navigate back to the results page, I get the following error:

TypeError: datalayer__WEBPACK_IMPORTED_MODULE_2_.default.getProperties is not a function

Can anyone advise where I might be going wrong?

0

There are 0 best solutions below