← view all posts

How to use async/await inside event handlers of a "use client" file in Next JS?

2024-03-29
|
next.js

I'm rendering a page which uses states to store data and it contains several event handlers that needs async/await because it contains fetch function. How would I go about this?

I've read about using useEffect, but how would I integrate it inside a handler in this case? Is it possible?

Here's a snippet of one of my page.jsx file:

"use client";
import { useState } from "react";

const CarouselSectionPage = () => {
  const [file, setFile] = useState();
  const [uploading, setUploading] = useState(false);

  const handleFileChange = (e) => {
    if (e.target.files) {
      const image = e.target.files[0];
      new Compressor(image, {
        quality: 0.6, // 0.6 can also be used, but its not recommended to go below.
        success: (compressedResult) => {
          setCompressedFile(compressedResult);
          setFile(compressedResult);
        },
      });
    }
  };

  const handleUploadClick = () => {
    if (!compressedFile) {
      return;
    }
    try {   
      setUploading(true);
      await createCarousel({
        variables: {
          input: {
            image: {
              bucket: "testbucket",
              key: secret.key,
              region: "us-1",
            },
            ),
          },
        },
      });
      setUploading(false);
      setTimeout(() => {
        navigate(0);
      }, 2000);
    } catch (error) {
      console.log("Error uploading file: ", error);
    }
  };

  return (
    <div>
      <input
         type="file"
         id="images"
         accept="image/*"
         onChange={handleFileChange}
         required
         style={{ display: "none" }}
      />
      <button disabled={uploading} onClick={() => handleUploadClick()}>
    div>
  )
};

Thank you in advance!

1 Answers

Yes, you can use async/await inside event handlers of a "use client" file in Next.js. To integrate async/await inside your event handlers, you can modify your handler functions by making them asynchronous and using try/catch blocks to handle any errors. Here's how you can modify your handleUploadClick function to handle async operations:

const handleUploadClick = async () => {
  if (!compressedFile) {
    return;
  }

  try {
    setUploading(true);
    await createCarousel({
      variables: {
        input: {
          image: {
            bucket: "testbucket",
            key: secret.key,
            region: "us-1",
          },
        },
      },
    });
    setUploading(false);
    setTimeout(() => {
      navigate(0);
    }, 2000);
  } catch (error) {
    console.log("Error uploading file: ", error);
  }
};

By adding the async keyword to the handleUploadClick function, you can now use await inside it to wait for asynchronous operations to complete. Remember to handle errors using a try/catch block for better error handling.

This way, you can use async/await inside event handlers of a "use client" file in Next.js for handling asynchronous operations such as fetching data.

2024-03-29