Undefined error when rendering react component with data retrieved from GraphQL Apollo Client

Viewed 31

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?

0 Answers
Related