I am using Nextjs 14 client component to fetch and render data from my headless wordpress cms, this works in my local environment, however, when I deployed the app on aws amplify. The data does not show. Please i would like to know why this is happening and to know a better oh handling this. Here is my code below.
'use client'
function Faqs() {
const [data, setData] = useState([]);
const [search, setSearch] = useState(null);
const [searchResults, setSearchResults] = useState([]);
const [activeState, setActiveState] = useState({ title: null, index: null });
const [isSearchPerformed, setIsSearchPerformed] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [searchWords, setSearchWords] = useState([]);
const searchResultsRef = useRef(null);
useEffect(() => {
async function getFaqData() {
let receivedData = await getFaqs();
console.log(receivedData);
const flattenData = receivedData.flatMap((edge) =>
edge.node.cta.questionAndAnswer.map((qa) => ({
id: `${edge.node.id}`,
title: edge.node.title,
question: qa.question,
answer: qa.answer,
}))
);
console.log(flattenData);
const newSearch = new JsSearch.Search("id");
newSearch.indexStrategy = new JsSearch.PrefixIndexStrategy();
newSearch.sanitizer = new JsSearch.LowerCaseSanitizer();
newSearch.searchIndex = new JsSearch.TfIdfSearchIndex("id");
// Add indices and documents
newSearch.addIndex("question");
newSearch.addIndex("answer");
newSearch.addDocuments(flattenData);
// Update state with new search instance
setSearch(newSearch);
setData(receivedData);
}
getFaqData();
}, []);
useEffect(() => {
setIsSearchPerformed(false);
}, [searchQuery]);
const performSearch = () => {
setIsSearchPerformed(true);
if (searchQuery === "") {
setSearchResults([]);
setIsSearchPerformed(false);
} else {
const words = searchQuery.trim().toLowerCase().split(/s+/);
setSearchWords(words); // Update searchWords state
let combinedResults = new Set();
words.forEach((word) => {
const results = search.search(word);
results.forEach((result) => combinedResults.add(result));
});
setSearchResults(Array.from(combinedResults));
if (searchResultsRef.current) {
searchResultsRef.current.scrollIntoView({ behavior: "smooth" });
}
}
};
function highlightSearchTerm(text, searchWords) {
let highlightedText = text;
for (const word of searchWords) {
if (word.trim() === "") continue;
const escapedWord = word.replace(/[-/\^$*+?.()|[]{}]/g, "\$&");
highlightedText = highlightedText.replace(
new RegExp(escapedWord, "gi"),
(match) => `<span class="highlight">${match}</span>`
);
}
return DOMPurify.sanitize(highlightedText);
}
console.log(searchResults, "SEARCH RESULTS");
console.log(data, "FAQ data");
return (
<>
{" "}
<Hero
leftContent={
<HeroLeftComponent
data={data}
onSearchChange={setSearchQuery}
onSearch={performSearch}
/>
}
rightContent={""}
leftColW={"1fr"}
rightColW={"0.2fr"}
minHeight={"60rem"}
bgImg={faqsBg}
bgPosition={"50% 20%"}
/>
<Container>
<CustomContainer>
<Box sx={{ margin: "3rem 0" }}>
<HomeIcon>
<Link href={"/faqs"}>
{" "}
<Typography
variant="body1"
fontSize={{ mobile: "1.6rem", portraitTab: "1.4rem" }}
fontWeight={"500"}
>
FAQs{" "}
</Typography>
</Link>
</HomeIcon>
</Box>
<Box ref={searchResultsRef}>
{searchQuery !== "" && isSearchPerformed ? (
searchResults.length > 0 ? (
searchResults.map((item) => {
const highlightedQuestion = highlightSearchTerm(
item.question,
searchWords
);
const highlightedAnswer = highlightSearchTerm(
item.answer,
searchWords
);
return (
<Box margin={"5rem 0"}>
<Typography
variant="h3"
fontSize={{ mobile: "2.8rem", portraitTab: "2.4rem" }}
className="color-primary-light"
fontWeight={"500"}
paddingBottom={"2rem"}
>
{item.title}
</Typography>
<Typography
variant="h5"
fontSize={{ mobile: "2.7rem", portraitTab: "1.8rem" }}
fontWeight={"600"}
textTransform={"capitalize"}
sx={{
cursor: "pointer",
"&:hover": {
color: "#3768b0",
},
}}
className={`text-midnight-blue ${openSans.className}`}
dangerouslySetInnerHTML={{
__html: highlightedQuestion,
}}
></Typography>
<Typography
variant="h5"
fontSize={{ mobile: "1.9rem", portraitTab: "1.6rem" }}
fontWeight={"normal"}
lineHeight={"1.6"}
padding={"1rem 0"}
className={`text-midnight-blue ${openSans.className}`}
dangerouslySetInnerHTML={{
__html: highlightedAnswer,
}}
></Typography>
</Box>
);
})
) : (
<Box
display={"flex"}
height={"40vh"}
justifyContent={"center"}
alignItems={"center"}
className="flex min-h-[20vh] items-center justify-center"
>
<Typography
variant="h3"
fontSize={{ mobile: "2.8rem", portraitTab: "2.4rem" }}
className="color-primary-light"
fontWeight={"500"}
paddingBottom={"2rem"}
>
No question found
</Typography>
</Box>
)
) : (
<AccordionWrapper data={data} />
)}
</Box>
</CustomContainer>
</Container>
</>
);
}
export default Faqs;