#ERR_INVALID_URL when calling an API from the app/api folder

17 messages · Page 1 of 1 (latest)

ancient geyserBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

dapper herald
#

Just checking, are you doing the fetch in a client component (not server)

lofty crater
#

This is the full code:

image.png
#

The expected methood is when someone come to the site then check if he have token in the cookies and if yes then validate that, and if the validation is success then set the userData into a cookie, but the first step for me to call the api succesfully like in other files

#

Ahh and good to know that im using JS not typescript

dapper herald
lofty crater
#

Sorry, i cannot get what the problem is, i cannot fetch in dev mode and also tried to pass the localhost:3000 prefix for the fetch url but this doesnt works well either

#

I show the other code where it works correctly

#

The API:
import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function POST(request) {
const body = await request.json();

cookies().set("selectedLanguage", body?.selectedLanguage || "hu");

return NextResponse.json({
success: true,
data: { language: body?.selectedLanguage },
});
}

the code where i fetch this (inside a context):

const setSelectedLanguageCookie = (selectedLanguage) => {
fetch("/api/settings/language", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ selectedLanguage }),
})
.then((response) => response.json())
.then()
.catch((error) => console.error(error));
};

dapper herald
#

Did you read the link?

lofty crater
#

You mean that i should create a file like fetch.js and inside that have the fetch methood and in files like page.js just call that fetch.js file?

lofty crater
dapper herald
#

Just do the code that you would do on the API, but on the server (so yeah, you can create a file that has the code)

lofty crater
#

Okay so if i create a file like saveTheUserData.js and inside that just have a function which ones runs the
fetch(‘api/user’ ….) then call this function inside the page.js this should work fine right?

dapper herald
#

Yeah, and if you still want the API, you can call that file also

lofty crater
#

Alright i give it a try now thanks

#

tried something like this:
lib/saveUserData.js :
export default function saveUserData(data) {
fetch("/api/user", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ hello: data }),
})
.then((response) => response.json())
.then((data) => {
return data;
})
.catch((error) => console.error(error));
}
and now inside the page.js file:

export default function Page() {
const token = cookies().get("token");

const data = saveUserData("Hello");
console.log(data);
if (token) {
redirect("/dashboard");
} else {
redirect("/login/sign-in");
}
}

and the same erroor (INVALID_URL)