I'm currently working on developing an app that features a search bar where users can input a name. The app then queries two different APIs to gather information about that name, displays it to the user, and saves the search along with the results to mongoDb. The search form is located in the navigation and once submitted, redirects the user to a [searchName]/page that has the following structure:
type Props = {
searchParams: { [q: string]: string };
};
const SearchResults = async ({ searchParams }: Props) => {
const nationalityReq: Promise<NationalizeResponse> = getNationality(
searchParams.q,
);
const genderReq: Promise<GenderizeResponse> = getGenderData(searchParams.q);
const [nationalityData, genderData] = await Promise.all([
nationalityReq,
genderReq,
]);
const result: SearchResult = {
search: searchParams.q,
results: {
nationality: nationalityData,
gender: genderData,
},
};
await createSearchResult(result);
return (
<div className="flex-col space-y-14">
HTML with results
</div>
);
};
I am facing an issue where the API fetching process does not run every time I change the search parameter by typing in the search bar and pressing enter. I'm unsure how to resolve this problem. Any suggestions or help would be greatly appreciated.