Next.js Discord

Discord Forum

Weird Server Action behavior

Unanswered
Acorn-plum gall posted this in #help-forum
Open in Discord
Acorn-plum gallOP
export const joinServer = async (formData: FormData) => {
  const content = formData.get("topic");
  const response = await fetch("http://localhost/join", {
    cache: "no-cache",
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ topic: content }),
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const data = await response.json();
  // console.log(data);
  // console.log(content);

  return data;
};

While fetch server action is working fine
However, when the topic is either {"topic":"Java"} or {"topic":"JavaScript"} the system doesn't send a request to an API. Instead, it retrieves and returns a previously cached response related to one of these topics. It seems to use the initial characters to identify similar requests.

29 Replies

thats just a normal API handler
Acorn-plum gallOP
i defined action in different file and calling it client component 
<form
        className="flex-none"
        action={async (formData) => {
          console.log(formData.get("topic"));
          const topic = formData.get("topic");
          if (topic !== null) {
            setInputTopic(topic.toString());
          }
          const data = await joinServer(formData);
          setInviteLink(data);
          setSelectedOption(null); /
        }}
      ></form>
but then you call joinServer function which is still in the client
then calls fetch the server
so its not a server action
Acorn-plum gallOP
ooo
aardani
anyway where is the minimum reproduction repository?
Acorn-plum gallOP
u want a github repo?
aardani
github repo, or codesandbox, either is fine
@aardani is `localhost/join` in external server or is it also in Next.js?
Acorn-plum gallOP
its an external flask server
aardani
have you confirmed in postman/rest/curl that accessing localhost/join with different body will not produced cached result?
Acorn-plum gallOP
response from this server is as expceted problem only when fetched from within nextjs
and only with java and javascript
@aardani have you confirmed in postman/rest/curl that accessing `localhost/join` with different body will not produced cached result?
Acorn-plum gallOP
yep tested in postman and there is no issue with api
aardani
can you determine at which point it returns the same data?
i.e put console.log() in before fetch, right after fetch, and console.log(data) before returning it,
and also one in action={}
Acorn-plum gallOP
lol now im more concered about it being a client component my api routes must be exposed then?
use proper server action to obfuscate your api routes
@aardani can you determine at which point it returns the same data? i.e put console.log() in before fetch, right after fetch, and console.log(data) before returning it, and also one in `action={}`
Acorn-plum gallOP
things got even more weird now it works as normal when request with Java is made first then javascript but other way around and it bugs
aardani
did you test your api with postman with the same exact header?
Acorn-plum gallOP
found the culprit 
[channel for channel in guild.voice_channels if channel.name.startswith(topic)]

sorry for stressing you out
@Acorn-plum gall found the culprit py [channel for channel in guild.voice_channels if channel.name.startswith(topic)] sorry for stressing you out
aardani
No sweat man, im more concerned about you getting stressed from that instead 😅
Acorn-plum gallOP
haha i coded that few weeks ago for simple task didnt took increased complexity in request from frontend into account
Acorn-plum gallOP
@aardani https://youtu.be/RadgkoJrhu0?list=PLK5U0tyd34tBYZ1L6rplNfFNNQPwgCRR0&t=226
as you said my component isnt server component, but in video it says its server component also im using "user server" in my action.ts
"use server";
export const joinServer = async (formData: FormData) => {
//api fetch call
}