It seems that I have no data on videos but there is data on clients. I suspect that my fallback isn't working because of this.
Is there a way to separate these data sets so I can implement something like this with the fallback: if(!videos) return props: null
import HomeComponent from "../components/Home";
import { sanityClient } from "../components/sanity";
export const getServerSideProps = async ({ params }: any) => {
const query = `{
'clients': *[ _type == "clients"] {
_id,
client,
mainImage,
},
'videos': *[ _type == "videos"] {
id,
title,
url,
},
'services': *[ _type == "services"] {
_id,
title,
description,
mainImage,
},
}`;
;
const fetchedData = await sanityClient.fetch(query);
if (!fetchedData) {
return {
props: null,
notFound: true,
fallback: "blocking",
};
}
return { props: { fetchedData } };
};
const Home= ({ props }: any) => {
return (
<>
<HomeComponent props={props} />
</>
);
};
export default Home;