Next.js Discord

Discord Forum

Next.js fetch issue

Unanswered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
Hello, no matter what fetch request I do it always returns an empty object, and im not sure why. The url works i tried postman and hardcoding the url in the website.

40 Replies

Netherland DwarfOP
const DynamicBlur: React.FC<{ src: string }> = async ({ src }) => {
  const buffer = await fetch(src).then(async (res) => {
    console.log(src); // https://images.unsplash.com/photo-1682687220015-186f63b8850a?q=80&w=2750&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
           

    console.log(JSON.stringify(res)); // {}
    const b = Buffer.from(await res.arrayBuffer());
    console.log(typeof b); // prints object but should be string type
    return b;
  });
  const { base64 } = await getPlaiceholder(buffer);
  return (
    <Image src={src} alt="" fill placeholder="blur" blurDataURL={base64} />
  );
};
export default DynamicBlur;
SharpieMaster
do you get any errors in the console?
for example, CORS?
<Milind ツ />
i am not sure why its returning empty object but code works fine as it should
the type b is returning object because it is not told to convert it to string.
if u convert it to string, the plaiceholder wont work. because getPlaiceholder() expects a buffer, not string
although the ide console does log the buffer, not empty object
<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 02 01 00 48 00 48 00 00 ff e2 0c 58 49 43 43 5f 50 52 4f 46 49 4c 45 00 01 01 00 00 0c 48 4c 69 6e 6f 02 10 00 00 ... 907356 more bytes>
@<Milind ツ /> <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 02 01 00 48 00 48 00 00 ff e2 0c 58 49 43 43 5f 50 52 4f 46 49 4c 45 00 01 01 00 00 0c 48 4c 69 6e 6f 02 10 00 00 ... 907356 more bytes>
SharpieMaster
Im trying to run the code on my machine and it sais that getPlaceholder() is an unknown function,
which library is being used?
<Milind ツ />
its coming from plaiceholder package.
SharpieMaster
also shouldnt the fetch be in a use effect?
<Milind ツ />
no?
nvm u are different guy
i thought op copied it without knowing the package lol
@<Milind ツ /> no?
<Milind ツ />
when u use a server component, (basically in app router), you dont need useEffect hook to perform fetch request
as such component can be converted to async components
SharpieMaster
mb, didnt know if it was client or server
Siberian Rubythroat
You do something wrong

Try to build 2-3 projects using Code With Antinio channel

There he shouw you how you can use axios to fetch data

Othewise you may need to refer to next.js docs about using fetch()

usually you do it like so with fetch()
async function sendMessage(event: FormEvent) {
  event.preventDefault();
  setMessage("");

  const requestBody = JSON.stringify({
    body: message,
    ticketId: ticket_id,
    senderId: userStore.userId,
    senderUsername: userStore.username,
    senderAvatarUrl: userStore.avatarUrl,
    // TODO - images logic in the future
    images: undefined,
  });

  try {
    const response = await fetch("/api/message/send", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: requestBody,
    });

    if (!response.ok) {
      throw new Error("Failed to send message");
    }

    // Handle success if needed
  } catch (error) {
    console.error("Error sending message:", error);
    // Handle error if needed
  }
}
`
Also I don't understand why do you use res.arrayBuffer()
<Milind ツ />
Because the image formats are parsed in the form of buffer format
They are not the usual basic json data
Your example is irrelevant to his issue
Netherland DwarfOP
thanks everyone, no it wasnt that
the issue was different and now I will write a new post of the issue
@joulev you are completely wrong here. 1. [don't use axios](<https://www.adios-axios.com>). 2. using `fetch` as the OP did is totally fine. `fetch` is available on the server and in nodejs, not a browser-only thing. 3. refer to the [`.arrayBuffer` documentation](<https://developer.mozilla.org/en-US/docs/Web/API/Response/arrayBuffer>)
Siberian Rubythroat
Unlike Axios, which introduces its own abstractions and API design,

And a lot of unrelated lorem inpsum - good reason

The term "isomorphic" is a fancy way of saying "it works on both the client side and the server side."

Also good reason do don't use axios
@Siberian Rubythroat its better when you send me why he use res.arrayBuffer() instead of read a lot of docs and spent your time on it
joulev
the response is a binary buffer, not a textual response. hence they used .arrayBuffer which is the way to read binary responses
just go read how to use fetch
@joulev this message doesn't make sense to me. yes isomorphic means exactly that, what does that have anything to do with fetch vs axios?
Siberian Rubythroat
same question
I just found it here
@joulev just go read how to use `fetch`
Siberian Rubythroat
I will use axios
Because I want and see no reason to use fetch()
for me code with axios looks cleaner and I learned how to create website usigng axios
@Siberian Rubythroat same question I just found it here
joulev
yes because i maintain that you should not use axios in this day and age. fetch() is isomorphic. you can fetch() in the server.

your response to the OP stating that they erroneously used fetch() and they should use axios instead is completely wrong.
@Siberian Rubythroat Because I want and see no reason to use fetch()
<Milind ツ />
Just because you like something does not mean you expect everyone else to follow you
Axios might be good for you. But it doesn't mean everything else is plain shit compared to it.
@Siberian Rubythroat Because I want and see no reason to use fetch()
josh
in next, there is really not a good reason to favor axios over fetch because you lose the caching integration built into fetch