How to use API Router to pass off-site data

Answered

Cordilleran Flycatcher posted this in #help-forum

Cordilleran FlycatcherOP

2023-10-19T14:56:54.000Z

Hello,
I'm building a simple kiosk style webpage for a project. I have mapbox gl running on a client-side page with "use client".

ON that page, I cannot make any requests to the api.rsoe-edis.org page that I need to make, however I can get the data needed on a different file.

I have my src/api/rsoe.tsx file set up,

import { type NextApiRequest, type NextApiResponse} from "next";
import { isNull } from "util";
import { NextRequest, NextResponse } from "next/server";

type ResponseData = {
    data: any
}

export default async function passData(
    req: NextApiRequest,
    res: NextApiResponse, 
    eventlist: number){    

    let cat;
    if(Category[eventlist]!==null)
    {
        cat = Category[eventlist];
    }
        

    const output_data = await GoFetch(cat);// This builds my url based on the category list so I can change which group of info I'm fetching. Works great for what it needs to do!

    return res.status(200).json(output_data)
}

Now, I have my mapbox page that runs and builds my mapbox map. (See comment for script)

I have a function that tries to GET from my weather api in order to grab that weather data and get it to the client. However, it returns a 404 error. What am I missing or need to get my internal API to get data from an External API?

Answered by Cordilleran Flycatcher

export async function GET(req: NextRequest)
{
   // const check = await fetch(get_category(Category.Tsunami));
    const check = await GoFetch(Category.Tsunami);// <---
    //Category.X not Category[index]
    return NextResponse.json(check);
}

View full answer

100 Replies

Cordilleran FlycatcherOP

2023-10-19T14:57:14.000Z

This is the other side of the script

"use client"
import * as React from "react";
import mapboxgl, { Map } from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import {Category, /*passData*/} from './rsoe/rsoe';

const MapboxMap = (/*{jsondata: data}*/) =>
{
    const [map, setMap] = React.useState<mapboxgl.Map>();

    const mapNode = React.useRef(null);
    mapboxgl.accessToken = <KEY>; // Just hiding my key
    React.useEffect(()=>{
        const node = mapNode.current;

        if(typeof window === "undefined" || node === null) return;

        const mapboxMap = new mapboxgl.Map({
            container: node,
            style: "mapbox://styles/mapbox/light-v11",
            center: [-72,41],
            zoom:0.6
        });
        setMap(mapboxMap);
        const marker = new mapboxgl.Marker().setLngLat([-72,40]).addTo(mapboxMap);
        
        async function grab() // Returns 404 error
        {
           const res = await fetch('/api/rsoe',{
            method: 'GET',
            headers: {,
            mode:"cors"
           });
           console.log(res.json());
        }
        grab();
        // END
        return ()=>{mapboxMap.remove()};
    },[]);
    return <div ref={mapNode} style={{width:"100%",height:"100%"}}/>;
}
export default MapboxMap

Pacific herring

2023-10-19T21:19:57.000Z

@Cordilleran Flycatcher

are you there

when you fetch

remove the dot

'./api/rsoe'

'/api/rsoe'

try

Cordilleran FlycatcherOP

2023-10-20T13:02:32.000Z

Thanks for the suggestion! I did clean that up, noticed it while debugging some yesterday. Unfortunately it didn't help.

I've set up a get function,

export async function GET(req: NextRequest)
{
   
    return NextResponse.json({message: "test"});
}

But the response is 404 when trying to find api/rsoe
I can add a route.tsx to the folder and recive 405 instead of 404.