Calling server action from useEffect hook when certain searchParams change causes error
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
I'm implementing search feature in an overlay where I shallow update all querystring params when search input and facets change.
To avoid having to refetch all the requests from the page below the overlay I deliberately chose not to make a router.push but only update the urlparams shallow.
Therefore the initial server component that does the initial request is never triggered so inside it I have this client component where I want to re-trigger the server action that is responsible for fetching new data. It seems to work fine when I call it onClick from a button when I want to load more data, but for some reason I'm getting this error when trying to call it from inside the useEffect hook when certain searchParams change
"Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again."
Any idea how to trigger a server action when querystring values are shallow updated if not using useEffect?
To avoid having to refetch all the requests from the page below the overlay I deliberately chose not to make a router.push but only update the urlparams shallow.
Therefore the initial server component that does the initial request is never triggered so inside it I have this client component where I want to re-trigger the server action that is responsible for fetching new data. It seems to work fine when I call it onClick from a button when I want to load more data, but for some reason I'm getting this error when trying to call it from inside the useEffect hook when certain searchParams change
"Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again."
Any idea how to trigger a server action when querystring values are shallow updated if not using useEffect?