NextJS Proper way to update UI State in client component when fetching data with Server Actions

Question

My objective is to build a page using nextjs 14 that is a stock scanner that loads some data from an external api using some default parameters. In addition, I want to provide the user some additional options to customize paramaters and re-run the scan and load the results (e.g, below).

The data is loading in fine and I can actually load in new data with a server action, but there is one problem. As it is, the line

setIsLoading(true in my reload function leads to the dreaded async/await error

Unhandled Runtime Error Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

Is this a reasonable approach to organizing this client/server component interaction with server actions. If so, what is the proper way to update the isLoading state so that I can provide some feedback to the user when the scan button is clicked?

here is my page.tsx

"use client";
import { BollingerBandsScreenerResult } from "../../screener-types";
import { ScreenerErrorMsg } from "@/app/services/ScreenerService";
import { Either, match } from "@/app/utils/BasicUtils";
import NavWrapper from "@/app/components/NavWrapper";
import TableSkeleton from "@/app/components/screener/TableSkeleton";
import BollingerBandsBreachHeader from "../breach/BollingerBandsBreachHeader";
import SimpleScreenerResultsTable from "@/app/components/screener/SimpleScreenerResultsTable";
import BollingerBandsBreachParameters from "./BollingerBreachParameters";
import { getBBBreachData } from "./actions";
import { useEffect, useState } from "react";

const BollingerBreachScreen = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      const data = await getBBBreachData();

      setIsLoading(false);
      setData(data);
    };

    fetchData();
  }, []);

  const reloadData = async (
    minClosePrice: number,
    period: number,
    multiplier: number,
    lookback: number
  ) => {
    setIsLoading(true); //this is the problem line
    const reload = await getBBBreachData(
      minClosePrice,
      period,
      multiplier,
      lookback
    );
    setData(reload);
  };

  if (!data || isLoading) {
    return (
      
        
          
          
        
      
    );
  }

  return match(
    data,
    (errorString) => {
      return (
        
          
            
            
            {errorString}
          
        
      );
    },
    (bbResults) => {
      return (
        
          
            

            
            
          
        
      );
    }
  );
};

export default BollingerBreachScreen;

Here is my component for user interaction

"use client";
import { Roboto } from "next/font/google";
import { useState } from "react";

const roboto = Roboto({
  subsets: ["latin"],
  weight: ["100", "300", "400", "500", "700"],
});

interface BollingerBandsBreachParametersProps {
  updateFn: (
    minClosePrice: number,
    period: number,
    multiplier: number,
    lookback: number
  ) => void;
}

const BollingerBandsBreachParameters: React.FC<
  BollingerBandsBreachParametersProps
> = ({ updateFn }) => {
  const [minClosePrice, setMinClosePrice] = useState(10);
  const [period, setPeriod] = useState(20);
  const [multiplier, setMultiplier] = useState(2);
  const [lookback, setLookback] = useState(1);

  const handlePeriodSet = (event: React.ChangeEvent) => {
    const minValue = parseInt(event.target.value);
    setPeriod(isNaN(minValue) ? 0 : minValue);
  };

  const handleMultiplierSet = (event: React.ChangeEvent) => {
    const minValue = parseFloat(event.target.value);
    setMultiplier(isNaN(minValue) ? 0 : minValue);
  };

  const handleLookbackSet = (event: React.ChangeEvent) => {
    const minValue = parseInt(event.target.value);
    setLookback(isNaN(minValue) ? 0 : minValue);
  };

  const handleMinCloseSet = (event: React.ChangeEvent) => {
    const minValue = parseInt(event.target.value);
    setMinClosePrice(isNaN(minValue) ? 0 : minValue);
  };

  const handleClick = async () => {
    updateFn(minClosePrice, period, multiplier, lookback);
  };

  return (
    <>
      Scan Criteria
      
        Period
        
        Multiplier
        
        Lookback
        
        Minimum Close Price
        

        
      
    
  );
};

export default BollingerBandsBreachParameters;

Here is my server action for loading data in actions.ts

export async function getBBBreachData(
  prevState: any,
  minClosePrice: number = 10,
  period: number = 20,
  multiplier: number = 2,
  lookback: number = 1
): Promise> {
  try {
    const url = `${BOLLINGER_BASE}/lower-breach?minClosePrice=${minClosePrice}&period=${period}&multiplier=${multiplier}&lookback=${lookback}`;

    const response = await fetch(url, {
      next: { revalidate: 0 },
    });

    if (response.ok) {
      const res = await response.json();
      return Right(res);
    } else {
      return Left("Could not fetch launchpad results");
    }
  } catch (error) {
    console.error(error);
    return Left("Error fetching mg leader results");
  }
}

NextJS Proper way to update UI State in client component when fetching data with Server Actions

Answers (1)

Related Questions