TTC
Theo's Typesafe Cult•2w ago
utdev

Slug Api Fetch error

I have a backend running on: http://test.localhost/api/housing/db-apartments/26e87de6-f912-49de-86e8-407fb3ca997e Which returns data for a single item. In my nextjs frontend which runs on http://localhost:3000 I have a [slug].tsx which does following: 
type Properties = {
  params: Promise<{ slug: string }>
}

export default async function HousingDetailPage({ params }: Properties) {
  const { slug } = await params
  const housing = await getHousingById(slug)
...

export async function getHousingById(id: string): Promise<HousingUnit | null> {
    console.log('getHousingById', `${API_PATH}/db-apartments/${id}`);
    try {
        // Use the rewrite rule to get data
        const response = await fetch(`${API_PATH}/db-apartments/${id}`, {
            headers: {
                'Accept': 'application/json',
            }
        });

        // If the response is not OK, it means the housing unit wasn't found
        if (!response.ok) {
            console.error(`Housing unit with ID ${id} not found`);
            return null;
        }

        const data = await response.json();
        return data;
    } catch (error) {
        console.error(`Error fetching housing unit with ID ${id}:`, error);
        return null;
    }
} 
type Properties = {
  params: Promise<{ slug: string }>
}

export default async function HousingDetailPage({ params }: Properties) {
  const { slug } = await params
  const housing = await getHousingById(slug)
...

export async function getHousingById(id: string): Promise<HousingUnit | null> {
    console.log('getHousingById', `${API_PATH}/db-apartments/${id}`);
    try {
        // Use the rewrite rule to get data
        const response = await fetch(`${API_PATH}/db-apartments/${id}`, {
            headers: {
                'Accept': 'application/json',
            }
        });

        // If the response is not OK, it means the housing unit wasn't found
        if (!response.ok) {
            console.error(`Housing unit with ID ${id} not found`);
            return null;
        }

        const data = await response.json();
        return data;
    } catch (error) {
        console.error(`Error fetching housing unit with ID ${id}:`, error);
        return null;
    }
}
The generated url is correct, but I get this error 
Console Error

[ Server ] Error: fetch failed

Source
src/lib/api/housing.ts (110:26) @ async getHousingById

  108 |     try {
  109 |         // Use the rewrite rule to get data
> 110 |         const response = await fetch(`${API_PATH}/db-apartments/${id}`, {
Console Error

[ Server ] Error: fetch failed

Source
src/lib/api/housing.ts (110:26) @ async getHousingById

  108 |     try {
  109 |         // Use the rewrite rule to get data
> 110 |         const response = await fetch(`${API_PATH}/db-apartments/${id}`, {
The dev console says: 
 Server  Error fetching housing unit with ID 26e87de6-f912-49de-86e8-407fb3ca997e: Error: fetch failed
    at async getHousingById (housing.ts:110:26)
    at async HousingDetailPage (page.tsx:30:19)
 Server  Error fetching housing unit with ID 26e87de6-f912-49de-86e8-407fb3ca997e: Error: fetch failed
    at async getHousingById (housing.ts:110:26)
    at async HousingDetailPage (page.tsx:30:19)
What am I missing, shouldn't it just fetch the data?
3 Replies
The Guy
The Guy•2w ago
Main thing I’m noticing is the subdomain on localhost (not common, so idk if that’s related), but the port is missing from the API url you’ve pasted. From what I’ve searched up, even with the subdomain on local host, you still need the port that backend is running on. test.localhost:<port number>/api/* try adding that in and seeing if it solves it!
utdev
utdevOP•2w ago
Its runs on port 80 thats why I did not need that, its a subdomain because there is a multitenant backend with different subdomains running. I'll try: test.localhost:80/api/* But aside from that it should work you say?
The Guy
The Guy•2w ago
From what I can tell, yes. Next step might be checking the appropriate service to ensure it’s receiving the request. If it isn’t, then there may be an issue with local DNS resolving the uri You can also check the network tab of your browser for this info (request should go out but fail) and it should give better info like request headers, response headers, etc. scratch this forgot we were working with an SSR component Also, I’m noticing you’re using a rewrite, would you be able to share that rewrite from your next config? It could possibly be related to that vs the local DNS

Did you find this page helpful?