Fetching with route handler

Answered

Beveren posted this in #help-forum

BeverenOP

2023-09-25T14:49:24.000Z

I am having a hard time understanding the documentation on how to do fetching properly.
What am I doing wrong here and what should be improved in my example?
I want to be able to run it locally as well as on Vercel platform.

Here is what I do so far:

page.tsx:

import { getRooms } from '@/lib/getRooms';

const Home = async () => {
    const rooms = await getRooms();

getRooms function used by page.tsx:

export const getRooms = async (): Promise<Rooms> => {
    const res = await fetch('/api/rooms');

    if (!res.ok) {
        // This will activate the closest `error.js` Error Boundary
        throw new Error('Failed to fetch rooms');
    }
    return res.json();
};

route.ts (/api/rooms/route.ts):

export async function GET(req: NextRequest) {
    // eslint-disable-next-line no-console
    console.log('req', req);

    try {
        const session = await getServerSession(authOptions);

        if (!session) {
            return new Response('Unauthorized', { status: 403 });
        }

        const res = await fetch(
            'https://somevalidendpoint.azurewebsites.net/rooms',
            {
                method: 'GET',
                next: {
                    revalidate: 10,
                },
                headers: {
                    'Content-Type': 'application/json',
                    // 'API-Key': process.env.AZURE_AD_CLIENT_ID,
                },
            }
        );

        const data = await res.json();

        // eslint-disable-next-line no-console
        console.log('GET', data);

        if (!res.ok) {
            // This will activate the closest `error.js` Error Boundary
            throw new Error('Failed to fetch rooms');
        }

        return NextResponse.json(data);
    } catch (error) {
        return new NextResponse(null, { status: 500 });
    }
}

Answered by Beveren

I wrapped this around, seems to work now:

<Suspense>
    <CurrentUser />
</Suspense>

View full answer

40 Replies

riský

2023-09-25T14:50:37.000Z

and is there an issue so far?

BeverenOP

2023-09-25T14:52:07.000Z

Internal error: TypeError: Failed to parse URL from /api/rooms

riský

2023-09-25T14:52:34.000Z

ahhh i see the issue

https://nextjs-faq.com/fetch-api-in-rsc

BeverenOP

2023-09-25T14:53:32.000Z

I have been reading this, but dont get it

how do I use the api route in page?

riský

2023-09-25T14:54:07.000Z

like as its a server component, you don't need a fetch request, you can just do the same code but inside the component

BeverenOP

2023-09-25T14:54:51.000Z

where dont i need fetch request?

what file

riský

2023-09-25T14:56:02.000Z

so, effectivly make the code inside GET a function like getRooms and use it accordingly... (but just the part that fetches from azure and does parsing)

BeverenOP

2023-09-25T14:58:51.000Z

but it has a try catch

so then i would need to wrap the whole try catch inside a function called getRooms?

riský

2023-09-25T15:00:06.000Z

just do the same code basicly, as you don't actually use req

BeverenOP

2023-09-25T15:02:00.000Z

I cannot export inside the export

how do i use it?

riský

2023-09-25T15:05:16.000Z

page.tsx:

import { getRooms } from '@/lib/getRooms';

const Home = async () => {
    const rooms = await getRooms();

getRooms function used by page.tsx:

export const getRooms = async (): Promise<Rooms> => {
    try {
        const session = await getServerSession(authOptions);

        if (!session) {
            throw new Error("Unauthorized")
        }

        const res = await fetch(
            'https://somevalidendpoint.azurewebsites.net/rooms',
            {
                method: 'GET',
                next: {
                    revalidate: 10,
                },
                headers: {
                    'Content-Type': 'application/json',
                    // 'API-Key': process.env.AZURE_AD_CLIENT_ID,
                },
            }
        );

        const data = await res.json();

        // eslint-disable-next-line no-console
        console.log('GET', data);

        if (!res.ok) {
            // This will activate the closest `error.js` Error Boundary
            throw new Error('Failed to fetch rooms');
        }

        return data
    } catch (error) {
        throw new Error('Failed to fetch rooms');
    }
};

route.ts (/api/rooms/route.ts):

export async function GET(req: NextRequest) {
    // eslint-disable-next-line no-console
    console.log('req', req);

    try {
      const data = getRooms()
      return NextResponse.json(data);
    } catch (error) {
        return new NextResponse(null, { status: 500 });
    }
}

can you do something like this (i haven't tested... just asuming based on your code)

you don't need to keep the api route, but you can (idk if you are using it elsewhere or just want it)

BeverenOP

2023-09-25T15:07:08.000Z

I have two calls, 1 Get to fetch rooms, and 1 Post to book meeting rooms also it has ad user session to validate users, I also need to provide some token in request to azure API at some point.

And the post is client side since i need a body payload from the user, but the get is running in two page.ts files that are server side, post is client side though

riský

2023-09-25T15:08:42.000Z

the issue is that page.ts is a server component, which means that everything is done on the server and then the code is given (so the fetch reqs are done server side)

BeverenOP

2023-09-25T15:10:17.000Z

since the post request made client side needs to provide user token to back-end i need to provide it somehow by cookie or something, not sure how NextAuth handles this

and i want it to be secure

riský

2023-09-25T15:10:51.000Z

you get the same auth stuff in server components as api routes

but if you really want to to that request client side, you can do the fetch and content in a client component (make new file and put 'use client' at the top)

BeverenOP

2023-09-25T15:15:47.000Z

In your example, how can I trigger the route?

is routes only triggered client side?

riský

2023-09-25T15:16:40.000Z

yeah

BeverenOP

2023-09-25T15:16:43.000Z

ahhh

riský

2023-09-25T15:16:59.000Z

routes is only if you want to do fetch from client

otherwise it would use server rendered version

BeverenOP

2023-09-25T15:17:21.000Z

got it, thought it was one fit all

riský

2023-09-25T15:17:49.000Z

let me know when you try it

and if you have any issues

BeverenOP

2023-09-25T15:18:01.000Z

sure, gonna test now

BeverenOP

2023-09-25T20:50:21.000Z

Well it worked somewhat, but I have issues with pages being deopted:

/components/Layout/Header/index.tsx

'use client';

import Link from 'next/link';
import Logo from '../Logo';
import CurrentUser from './CurrentUser';
import ThemeChanger from '../../Theme/ThemeChanger';

const Header = () => (
    <div className="m-4 grid grid-cols-2 gap-4">
        <div>
            <Link href="/">
                <Logo
                    className="fill-darkgrey dark:fill-pebble"
                    title="Knowit"
                />
            </Link>
        </div>

        <div className="text-right">
            <CurrentUser /> <-- Culprit
            <ThemeChanger />
        </div>
    </div>
);

export default Header;

BeverenOP

2023-09-25T21:10:02.000Z

'use client';

import { PiUserCircleDuotone } from 'react-icons/pi';
import { useSearchParams } from 'next/navigation';
import { useSession, signIn, signOut } from 'next-auth/react';
import { Button, Popover } from '@mui/material';
import { useState, MouseEvent } from 'react';

const CurrentUser = () => {
    const { data: session } = useSession();
    const searchParams = useSearchParams();
    const callbackUrl = searchParams.get('callbackUrl') ?? undefined;
    const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);

    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const open = Boolean(anchorEl);
    const id = open ? 'simple-popover' : undefined;

    return (
        <>
            <button
                type="button"
                aria-describedby={id}
                onClick={handleClick}
            >
                <PiUserCircleDuotone className="h-8 w-8 text-darkgrey dark:text-pebble" />
            </button>

            <Popover
                id={id}
                open={open}
                anchorEl={anchorEl}
                onClose={handleClose}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left',
                }}
            >
                <div className="p-4">
                    {session ? (
                        <Button onClick={() => signOut()}>
                            Log out
                        </Button>
                    ) : (
                        <Button
                            onClick={() => signIn('azure-ad', { callbackUrl })}
                        >
                            Login
                        </Button>
                    )}
                </div>
            </Popover>
        </>
    );
};
export default CurrentUser;

So why is the CurrentUser trowing off the whole app? Should this be an issue while using 'client side' ?

BeverenOP

2023-09-25T21:42:16.000Z

I wrapped this around, seems to work now:

<Suspense>
    <CurrentUser />
</Suspense>

Answer