data fetching

Answered

astro posted this in #help-forum

2024-05-03T13:29:19.221Z

im trying to fetch data from my api but the data doesnt show up, even in the network tab no request is being made to the api, here's my code:

component:

import axios from "axios";
import React from "react";

export default function OrdersPage() {
  async function getOrders() {
    try {
      const res = await axios.get("/api/orders");
      const orders = await res.data;

      return JSON.stringify(orders);
    } catch (error) {
      console.log(error);
    }
  }

  return <pre>{getOrders()}</pre>;
}

api route

export async function GET() {
  return NextResponse.json({ message: "Hello!" }, { status: 200 });
}

Answered by joulev

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

View full answer

41 Replies

B33fb0n3

2024-05-03T13:32:28.498Z

try to call the method outside of the dom and also await it. lmk if that works

@B33fb0n3 try to call the method outside of the dom and also await it. lmk if that works

astroOP

2024-05-03T13:52:00.399Z

how outside the dom?

@astro how outside the dom?

B33fb0n3

2024-05-03T15:30:52.610Z

red is inside the dom and yellow is outside the dom. Put your function in the yellow part

@B33fb0n3 red is inside the dom and yellow is outside the dom. Put your function in the yellow part

astroOP

2024-05-03T17:00:15.218Z

where do u even see the red and yellow? 😭

@astro where do u even see the red and yellow? 😭

B33fb0n3

2024-05-03T18:02:04.278Z

whoops forgot the screenshot. Place it at the blue line

and don't forget to add the await and read the result. And then show the result here

Horned Puffin

2024-05-04T02:41:31.895Z

Maybe something with the cache of nextjs

joulev

2024-05-04T03:21:04.638Z

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

Answer

@B33fb0n3 whoops forgot the screenshot. Place it at the blue line

astroOP

2024-05-04T04:47:29.699Z

i migrated to fetch api btw

import React from "react";

export default async function OrdersPage() {
  async function getOrders() {
    const res = await fetch("/api/orders");
    if (!res.ok) {
      return { message: "Cannot fetch data" };
    }

    const orders = await res.json();

    return orders;
  }

  console.log(await getOrders());

  return <pre>{}</pre>;
}

if i remove the async/await from the component it doesnt thorw error

nor do i get any output

@joulev For starters: https://nextjs-faq.com/fetch-api-in-rsc

joulev

2024-05-04T05:03:15.536Z

@joulev .

astroOP

2024-05-04T05:22:10.353Z

but the route handler sends a rewuest to an external api if i do it on client side its gonna throw CORS error, plus api authorisation will also causr an issue

@astro i migrated to fetch api btw tsx import React from "react"; export default async function OrdersPage() { async function getOrders() { const res = await fetch("/api/orders"); if (!res.ok) { return { message: "Cannot fetch data" }; } const orders = await res.json(); return orders; } console.log(await getOrders()); return <pre>{}</pre>; }

B33fb0n3

2024-05-04T05:29:48.993Z

It seems like you are on server side. So just fetch the external api here

@B33fb0n3 It seems like you are on server side. So just fetch the external api here

astroOP

2024-05-04T05:31:32.857Z

u mean call the external api inside the component?

astroOP

2024-05-04T05:55:43.113Z

oh wait it actually worked

import React from "react";
import { generateAccessToken } from "@/lib/authorisation";

export default function OrdersPage() {
  async function getOrders() {
    const accessToken = await generateAccessToken(
      process.env?.QIKINK_CLIENT_ID ?? "",
      process.env?.QIKINK_CLIENT_SECRET ?? ""
    );
    const res = await fetch("https://api.qikink.com/api/order", {
      headers: {
        ClientId: process.env?.QIKINK_CLIENT_ID ?? "",
        Accesstoken: accessToken,
      },
    });
    if (!res.ok) {
      return JSON.stringify(await res.json(), null, 2);
    }
    return JSON.stringify(await res.json(), null, 2);
  }

  return <pre>{getOrders()}</pre>;
}

i have a few doubts tho

when i tried calling the api directly inside another component(client component) it threw CORS error

the getOrders function returns a promise, even tho i aint resolving it inside the pre tag it gives me the data, how?

@astro the getOrders function returns a promise, even tho i aint resolving it inside the `pre` tag it gives me the data, how?

B33fb0n3

2024-05-04T06:37:09.431Z

Now please bring some vision in this code like this:

import React from "react";
import { generateAccessToken } from "@/lib/authorisation";

export default function OrdersPage() {
  const accessToken = await generateAccessToken(
      process.env?.QIKINK_CLIENT_ID ?? "",
      process.env?.QIKINK_CLIENT_SECRET ?? ""
  );
  const res = await fetch("https://api.qikink.com/api/order", {
      headers: {
        ClientId: process.env?.QIKINK_CLIENT_ID ?? "",
        Accesstoken: accessToken,
      },
  });

  const orders = await res.json();
  console.log(orders) // <--- whats this value?
  return <pre>{JSON.stringify(orders, null, 2)}</pre>;
}