I have a small next.js project using server actions, calling a server action from a client component. I have had no other issues with any other server actions (about 5 of them). The response populates the dropdown fine when I load the page for the first time, but then once I refresh the page the response fails and after that I have to go to a different page then back to load the data.
Here is my component:
"use client";
import React, { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { getGenuses } from '@/server/plants';
const FilterBar: React.FC = () => {
const router = useRouter();
const searchParams = useSearchParams();
const initialGenus = searchParams.get('genus') || 'All';
const initialMinPrice = searchParams.get('minPrice') || '';
const initialMaxPrice = searchParams.get('maxPrice') || '';
const [genus, setGenus] = useState(initialGenus);
const [minPrice, setMinPrice] = useState(initialMinPrice);
const [maxPrice, setMaxPrice] = useState(initialMaxPrice);
const [genuses, setGenuses] = useState<string[]>([]);
useEffect(() => {
async function fetchGenuses() {
console.log("Fetching genuses...");
try {
console.log("Genus fetch attemt")
const response = await getGenuses();
console.log("Genuses fetched:", response);
if (response.genuses) {
console.log("Updating state with genuses:", response.genuses);
setGenuses(['All', ...response.genuses]);
} else {
console.error("No genuses in response", response);
}
} catch (error) {
console.error("Failed to fetch genuses:", error);
}
}
fetchGenuses();
}, []);
useEffect(() => {
const params = new URLSearchParams(searchParams.toString());
if (genus !== 'All') {
params.set('genus', genus);
} else {
params.delete('genus');
}
if (minPrice) {
params.set('minPrice', minPrice);
} else {
params.delete('minPrice');
}
if (maxPrice) {
params.set('maxPrice', maxPrice);
} else {
params.delete('maxPrice');
}
router.push(`/shop?${params.toString()}`);
}, [genus, minPrice, maxPrice]);
return (
<div className="flex flex-col space-y-4 my-8 px-4">
<div>
<label className="block mb-2">Genus:</label>
<select
value={genus}
onChange={(e) => setGenus(e.target.value)}
className="input input-bordered w-full h-8"
>
{genuses.map((g) => (
<option key={g} value={g}>{g}</option>
))}
</select>
</div>
<div>
<label className="block mb-2">Price Range:</label>
<div className="flex space-x-2">
<input
type="number"
value={minPrice}
onChange={(e) => setMinPrice(e.target.value)}
className="input input-bordered w-full h-8"
placeholder="Min"
/>
<input
type="number"
value={maxPrice}
onChange={(e) => setMaxPrice(e.target.value)}
className="input input-bordered w-full h-8"
placeholder="Max"
/>
</div>
</div>
</div>
);
};
export default FilterBar;
And here is my server action:
export async function getGenuses() {
console.log("Server: Calling getGenuses");
try {
const genuses = await prisma.plant.findMany({
distinct: ['genus'],
select: { genus: true },
});
console.log("Server: Genuses fetched", genuses);
const genusNames = genuses.map(plant => plant.genus).sort();
console.log({ genuses })
return { genuses: genusNames };
} catch (error) {
console.log("ERR")
console.error("Server: Error fetching genuses:", error);
return { error: 'Failed to fetch genuses' };
}
}
And here are the client logs:
Fetching genuses...
filterBar.tsx:23 Genus fetch attemt
filterBar.tsx:21 Fetching genuses...
filterBar.tsx:23 Genus fetch attemt
And the server logs:
Server: Calling getGenuses
Server: Genuses fetched [
{ genus: 'Musa' },
{ genus: 'Nephrolepis' },
{ genus: 'Monstera' },
{ genus: 'Sarracenia' },
{ genus: 'Dionaea' },
{ genus: 'Sansevieria' },
{ genus: 'Zamioculcas' },
{ genus: 'Spathiphyllum' },
{ genus: 'Chlorophytum ' }
]
{
genuses: [
{ genus: 'Musa' },
{ genus: 'Nephrolepis' },
{ genus: 'Monstera' },
{ genus: 'Sarracenia' },
{ genus: 'Dionaea' },
{ genus: 'Sansevieria' },
{ genus: 'Zamioculcas' },
{ genus: 'Spathiphyllum' },
{ genus: 'Chlorophytum ' }
]
}
POST /shop?sort=scientificName&order=asc 200 in 55ms
Plants query: {}
POST /shop?sort=scientificName&order=asc 200 in 38ms
I really don’t understand, everything logs up to the point at which the response comes back then nothing, no errors.
Thanks
Lots of logging, I have made a very simple server action that returns just a number but still no response on the client side.