El principal problema es cuando intentas analizar el contenido JSON,
JSON.parse(post.paragraph)
el contenido es indefinido. Por eso te da el error. No debe representar el contenido hasta que se carguen los datos. En mi problema particular fue el siguiente:
const BlogPostPage: React.FC<MatchProps> = (props: MatchProps) => {
const classes = useStyles();
const { data, loading, error } = useGetBlogQuery({
variables: {
id: props.match.params.id
}
});
return (
<BlogPostContent markdown={data?.blog?.contentJson}></BlogPostContent>
);
}
En este fragmento de código, estoy llamando a una consulta asíncrona a través del cliente de apolo. Sin embargo, en la llamada de procesamiento, recibí el mismo error que el suyo. Luego, he agregado el siguiente código, para esperar hasta que se carguen los datos. Una vez cargados los datos, se activa el gancho y se vuelve a renderizar el componente.
if (loading) return (<>{"loading..."}</>);
