reactjs - Typescript y Gatsby: integración de gatsby-plugin-ts + consultas GraphQL

Estoy usando gatsby-plugin-ts para generar tipos para mis consultas de página graphql.

El problema que tengo es que todos los tipos generados devuelven un tipo T | undefined para todos los campos, por lo que necesitaría verificar todos los subcampos de la consulta antes de usarlos en cualquier componente, de lo contrario el compilador lanzará un error.

Toma gatsby-plugin-image como ejemplo. Dada una consulta:

export const query = graphql`
  query IndexPage {
    banner: file(relativePath: { eq: "banner.jpg" }) {
      childImageSharp {
        gatsbyImageData(width: 1920)
      }
    }
  }
`;

El resultado data.banner debería pasarse a la función getImage, aunque si intentas hacerlo, TypeScript entiende y muestra el siguiente error, ya que undefined no se puede asignar a IGAtsbyImageData que espera getImage

Y esto es aún peor cuando se trata de consultas más complejas, como las del plugin markdownremark: todos los subcampos de un resultado de consulta tendrían que ser verificados manualmente cada vez. ¿Existe alguna solución para esto?

Respuesta #1

Esto parece ser causado por un error en las definiciones de tipo de gatsby-plugin-image. Desafortunadamente, las definiciones de tipo para getImage, getSrc, etc., no coinciden con su comportamiento seguro ante null. Esto también parece que solo se solucionó parcialmente, ya que el problemático tipo | null está un nivel más abajo en { childImageSharp: { gatsbyImageData: IGatsbyImageData } | null } (al menos en las definiciones de tipo de GraphQL Typegen - tu experiencia puede variar).

La solución más fácil es usar una afirmación de tipo:

const result = getImage(data.banner as ImageDataLike);

Esto le dice a Typescript: "Oye, sé que estos tipos no coinciden exactamente, pero confía en mí, data.banner siempre será un ImageDataLike".

Por supuesto, puedes evitar todo esto si estás dispuesto a definir tus tipos manualmente, como en la respuesta de @Alexey.

Si quieres mantenerte con tipos generados automáticamente, recomendaría actualizar al GraphQL Typegen oficial, que está integrado en Gatsby y se mantiene actualizado.

Respuesta #2

el tipo de datos de banner debe ser ImageDataLike

export interface DataBannerProps {
  banner: ImageDataLike;
  alt: string;
}