fix: ssr for search pages

This commit is contained in:
Vyacheslav Matyukhin 2022-04-23 01:15:19 +04:00
parent 2b5b6bf42b
commit da83eabdbe
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C

View File

@ -69,15 +69,13 @@ const CommonDisplay: React.FC<Props> = ({
}, },
}, },
pause: !isFirstRender, pause: !isFirstRender,
// note that if we don't force cache-only on SSR then queryResults.fetching is true which leads to an empty page
requestPolicy: isFirstRender ? "cache-only" : "network-only",
}); });
const queryIsEmpty = const queryIsEmpty =
queryParameters.query === undefined || queryParameters.query === ""; queryParameters.query === undefined || queryParameters.query === "";
const results: QuestionFragment[] = useMemo(() => { const results: QuestionFragment[] = useMemo(() => {
if (typing || queryResults.fetching) return []; // TODO - return results but show spinner or darken out all cards? if (typing || (!isFirstRender && queryResults.fetching)) return []; // TODO - return results but show spinner or darken out all cards?
if (queryIsEmpty) { if (queryIsEmpty) {
const filterManually = (results: QuestionFragment[]) => { const filterManually = (results: QuestionFragment[]) => {
@ -104,7 +102,15 @@ const CommonDisplay: React.FC<Props> = ({
} else { } else {
return queryResults.data?.result || []; return queryResults.data?.result || [];
} }
}, [queryResults.data, queryParameters]); }, [
typing,
isFirstRender,
queryResults.data,
queryResults.fetching,
queryIsEmpty,
queryParameters,
defaultResults,
]);
// I don't want the component which display questions (DisplayQuestions) to change with a change in queryParameters. But I want it to have access to the queryParameters, and in particular access to queryParameters.numDisplay. Hence why this function lives inside Home. // I don't want the component which display questions (DisplayQuestions) to change with a change in queryParameters. But I want it to have access to the queryParameters, and in particular access to queryParameters.numDisplay. Hence why this function lives inside Home.
const getInfoToDisplayQuestionsFunction = () => { const getInfoToDisplayQuestionsFunction = () => {