Next.js Discord

Discord Forum

Handling async function in website page file

Unanswered
Richard Evanson posted this in #help-forum
Open in Discord
Richard EvansonOP
I have made website page page.jsx and now that I have connected database with Prisma I have trouble of using Prisma async functions in my page. 

'use server'

import { PrismaClient } from "@prisma/client";

//Function return all data from selected table
export async function getTableData(table) 
{
  const prisma = new PrismaClient();
  try 
  {  
    const data = await prisma.game_results.findMany();
    prisma.$disconnect();
    return data;    
  } 
  catch (error) 
  {
    console.error("Error fetching data from ", {table}, error);
    throw error;
  }
}


this is my server action function that I import to page file. In this page file I try to get that data but I need to somehow call it also async 

const Leaderboard = () => {
  const allScores = getTableData('game_results')


if I just put await before getTableData it doesnt allow me that so what do I do?

40 Replies

Ray
const Leaderboard = async () => {
  const allScores = await 
getTableData('game_results')
the page component need to be async
Richard EvansonOP
but I cant do that
it is client componenet
Ray
pass the data to the client component or fetch client side
Richard EvansonOP
I have been trying to make something
like this

const Leaderboard = () => {
  const [allScores, setAllScores] = useState([]);
  const [scoresNormal, setScoresNormal] = useState([]);
  const [scoresChallange, setScoresChallange] = useState([]);
  const [buttonText, setButtonText] = useState('Show Challenge Mode Highscores');
  const [selectedType, setSelectedType] = useState('type1');
  const [resetTable, setResetTable] = useState(true);
  const [previewItem, setPreviewItem] = useState(null);

  useEffect(()=>{
    fetchData();
  }, []);

  async function fetchData(){
    const data = await getTableData("game_results")
    setAllScores(data)
    console.log(allScores)
  }
but I just get empty array
Ray
try to return some dummy data from getTableData and see if you see anything on the console?
like {id: 1} instead of returning data
Richard EvansonOP
in actions.js?
Ray
yes
return [ {id: 1}] instead of data
Richard EvansonOP
it is still empty array
It is dispaying whatever I set up in beggining
but is this right way to do this?
this is client component
Ray
yes you can do this
I just tried and it works
Richard EvansonOP
if I put another console.log(allScores) somewhere at bottom
I do get results
but it always logs empty while inside fetch function
but I need to know when it is filled because I have to split and modify this array into 2 arrays
Ray
do you see Error fetching data from on the server console?
Richard EvansonOP
no
but it shows up twice
empty array
but I have console.log once
Ray
useEffect will run twice in dev mode
Richard EvansonOP
but eventually it does fill up
because if I have console.log somewhere else it does show up
but why it doesnt wait for it in the function
Ray
maybe you cannot fetch data with server action like that and I wouldn't do this too
I will create a api route for it if need to fetch on client side
Richard EvansonOP
but isnt server action alternative to api
Ray
not with useEffect i think, not sure
I get hydration failed with it
Richard EvansonOP
all my website pages are client componenent
so this isnt one time thing I will have to use this again