ArticleListAll RSC

draft.tsx

'use client';

// imports

interface Props {
	section: ArticleListAllType;
	articlesQuery: string;
	isDraft: boolean;
}

export const ArticleListAllDraft: FC<Props> = ({section, articlesQuery, isDraft}) => {
	return (
		<PreviewSuspense fallback={<FullPageSpinner />}>
			<Preview section={section} articlesQuery={articlesQuery} isDraft={isDraft} />
		</PreviewSuspense>
	);
};

const Preview: FC<Props> = ({section, articlesQuery, isDraft}) => {
	const articles = usePreview(null, articlesQuery);
	return <ArticleListAllRender section={section} articles={articles} isDraft={isDraft} />;
};

index.tsx

// imports

interface Props {
	section: ArticleListAllType;
	isDraft: boolean;
}

export const ArticleListAll: FC<Props> = ({section, isDraft}) => {
	return isDraft ? (
		<ArticleListAllDraft section={section} articlesQuery={articlesQuery} isDraft={isDraft} />
	) : (
		<ArticleListAllServer section={section} articlesQuery={articlesQuery} isDraft={isDraft} />
	);
};

/**
 * Fetches all articles
 */
const articlesQuery = groq`
*[_type == "article" && defined(slug.current) && !(_id in path('drafts.**'))]{
	...
}
`;

render.tsx

// imports

interface Props {
	section: ArticleListAllType;
	articles: ArticleType[];
	isDraft: boolean;
}

export const ArticleListAllRender: FC<Props> = ({section, articles, isDraft}) => {
	const {theme, title} = section;
	return (
		<div
			className={clsx(
				'flex',
				'items-center',
				'justify-center',
				'p-5',
			)}
		>
			{/* render whatever */}
		</div>
	);
};

server.tsx

// imports

interface Props {
	section: ArticleListAllType;
	articlesQuery: string;
	isDraft: boolean;
}

export const ArticleListAllServer = async ({section, articlesQuery, isDraft}: Props) => {
	const articles = await sanityFetch(articlesQuery, z.array(articleSchema));
	return <ArticleListAllRender section={section} articles={articles} isDraft={isDraft} />;
};