I have the component above, which takes the ArtigoID params value from the URL and fetch it to a GraphQL endpoint.
const DadosDoArtigo = () => {
let { ArtigoID }: any = useParams();
const { data, loading } = useQuery<{ artigo: ArtigoParUsuariosInternos }>(
queryDadosArtigo,
{
variables: { ArtigoID: Number(ArtigoID) },
}
);
return (
<IceBgPanel>
<>
<SectionTitle>Dados do artigo</SectionTitle>
{data === undefined ? (
<p>Algum coisa para carregando</p>
) : (
<>
<p>Artigo aprovado</p>
<small>
{data.artigo.UltimaAcaoNoArtigo.Descricao === "Aprovado"
? "Sim"
: "Não"}
</small>
</>
)}
</>
</IceBgPanel>
);
};
My API is throwing only one request to run queryDadosArtigo and it gets the following object as response
{
"data": {
"artigo": [
{
"Titulo": "Teste",
"Tags": [
{
"NomeDaTag": "Callie Sampaio",
"TagID": 3,
"__typename": "ArticleTag"
},
{
"NomeDaTag": "Dale da Rocha",
"TagID": 5,
"__typename": "ArticleTag"
}
],
"Corpo": "<p>Chamado de teste</p>\n",
"HistoricoDoArtigo": [],
"VisivelParaTodosUsuarios": true,
"UltimaAcaoNoArtigo": {
"Descricao": "SavedInDevelopment",
"__typename": "TiposAcaoEmArtigo"
},
"__typename": "Artigo"
}
]
}
}
The problem is that when my React application tries to render the component, it breaks with a TypeError exception that says:
TypeError: data.artigo.UltimaAcaoNoArtigo is undefined
I can't understand why its undefined, since it actually has data that was retrieved by the GraphQL API. The second this I can't get is: why the ternary operator didn't render the paragraph, since data was undefined? Any guess why this is happening?