Next.js Discord

Discord Forum

Can't request to an api url on nextjs

Unanswered
Petit Bleu de Gascogne posted this in #help-forum
Open in Discord
Petit Bleu de GascogneOP
This is my project structure:

app/list/page.tsx
app/list/api/school/route.ts

components/list/MainList.tsx

The MainList.tsx is added on page.tsx

In components/list/mainlist.tsx, i have an axios get request, that runs when component is mounted
const fetchData = async () => {
    try {
      const response = await axios.get("/list/api/school");
      console.log(response);
    } catch (error) {
      console.log("Error fetching data: ", error);
    }
  };

  useEffect(() => {
    fetchData;
  }, []);


On postman, if i run 
localhost:3000/list/api/school
it works fine, I get the OK response.

12 Replies

Petit Bleu de GascogneOP
any ideas?
Western paper wasp
Can you show an error message, or describe what’s not working correctly?
Petit Bleu de GascogneOP
That’s the problem… there is no error, but, logging the request response, there is no log… but, requesting on postman, i get the response i needed.
Western paper wasp
You can look in your browser’s network devtools to see whether or not the request is being made
You can also add console.log statements in your fetchData function to see if it’s being called
Petit Bleu de GascogneOP
I looked into network tab and there is no request being made.. i will look into the fetchData to see if there is any log
oliver
Hmmm, in the useEffect, you just referenced fetchData, didn't call it
const fetchData = async () => {
    try {
      const response = await axios.get("/list/api/school");
      console.log(response);
    } catch (error) {
      console.log("Error fetching data: ", error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);
You have to modify your code like this
🙃
Petit Bleu de GascogneOP
well, that was it... irreal how I forgot that tiny detail, lol.... thank you so much..
Western paper wasp
good catch oliver