Next.js Discord

Discord Forum

TypeError: Failed to parse URL from /api/channels

Answered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
My application fails to send request to the api. I don't know what causing this issue.

7 Replies

Alligator mississippiensisOP
⨯ TypeError: Failed to parse URL from /api/channels
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'TypeError',
  page: '/channels/657ffe4567a616da189e9e23'
}

this is what the consol says
// app/api/channels/route.ts

import { NextRequest, NextResponse } from "next/server";
import connect from "@/utils/server-helper";
import Channels from "@/models/Channels";

export const GET = async () => {
  await connect();

  try {
    const channels = mergeSort(await Channels.find({}));

    return NextResponse.json(channels, { status: 200 });
  } catch (err) {
    console.log(err);
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
  }
};

const mergeSort = function(arr:  any[]) {
  if(arr.length <= 1) return arr; //base case
  let middle = Math.floor(arr.length / 2);
  let leftArray  = arr.slice(0, middle);
  let rightArray = arr.slice(middle);

  mergeSort(leftArray);
  mergeSort(rightArray);
  merge(leftArray, rightArray, arr);
  return arr;
}

const merge = function(leftArray:any[], rightArray: any[], array: any[]) {
  let i = 0, l = 0, r = 0;

  while(l < leftArray.length && r < rightArray.length) {
      if(leftArray[l].createdAt > rightArray[r].createdAt){
          array[i++] = leftArray[l++];
      } else {
          array[i++] = rightArray[r++];
      }
  }

  while(l < leftArray.length){
      array[i++] = leftArray[l++];
  }

  while(r < rightArray.length) {
      array[i++] =  rightArray[r++];
  }
}

this is my route handler
this is how I fetch the API route
import ChannelView from "@/components/client/ChannelView";
import { TChannel } from "@/components/client/ChannelsView";
import { FC } from "react";

export function generateMetadata({params}: {params: PageProps}) {
    return {
        title: `${params.params.chnl_name}`
    }
}
interface PageProps {
    params:{
        _id: string;
        chnl_id: string;
        chnl_name: string;
        chnl_desc: string;
        category: string;
        createdAt: Date;
        createdBy: string;
      
    }
}

export async function generateStaticParams() {
  const res = await fetch("/api/channels",{cache:"no-cache"});
  const data: TChannel[] = await res.json();
  return data.map((channel) => ({
    chnl_id: channel.chnl_id,
    chnl_name: channel.chnl_name,
    chnl_desc: channel.chnl_desc,
    category: channel.category,
    createdAt: channel.createdAt,
    createdBy: channel.createdBy,
  }));
}

const Page: FC<PageProps> = ({params}) => {
  return (
    <main className="pt-10 w-4/5 min-h-screen">
      <section className="flex flex-col mt-15">
        <ChannelView params={params}/>
      </section>
    </main>
  );
};

export default Page;
Northeast Congo Lion
hi Do you have soluted this problem, and why?
Northeast Congo Lion
Answer
@joulev <https://nextjs-faq.com/fetch-api-in-rsc>
Northeast Congo Lion
thankyou