gatsby-typescript

gatsby-typescript copied to clipboard

I am not sure if this is a bug but I checked through the issues and couldn't find any. Except https://github.com/d4rekanguok/gatsby-typescript/issues/54 but that got me no where.

When I am writing an image query like this

const data = useStaticQuery<GetImageQuery>(graphql`
		query getImage {
			image: file(relativePath: { eq: "myface.jpg" }) {
				childImageSharp {
					fluid {
						...GatsbyImageSharpFluid
						...GatsbyImageSharpFluidLimitPresentationSize
					}
				}
			}
		}
	`);

These are the types generated for that query

export type GetImageQueryVariables = Exact<{ [key: string]: never; }>;
export type GetImageQuery = { image?: Maybe<{ childImageSharp?: Maybe<{ fluid?: Maybe<(
        GatsbyImageSharpFluidFragment
        & GatsbyImageSharpFluidLimitPresentationSizeFragment
      )> }> }> };

Now, whenever I am trying to use the Fluid image object for gatsby-image's Img tag like this

fluid={data.image.childImageSharp.fluid } className="m-4 sm:my-4 w-64 rounded-full shadow-2xl border-indigo-400 border-4" />

I get this error and the compile fails

However, if I cast the object manually, like this fluid={data.image.childImageSharp.fluid as FluidObject } (as FluidObject) everything works fine. The image loads and I'm all good. However is this the right way? what am I doing wrong?

Here is my plugin config

resolve: `gatsby-plugin-ts`,
  options: {
    tsLoader: {
      logLevel: 'warn',
    },
    forkTsCheckerPlugin: {
      eslint: true,
    },
    fileName: `types/graphql-types.ts`,
    codegen: true,
    codegenDelay: 250,
    typeCheck: true,
    pluckConfig: {
      globalGqlIdentifierName: 'graphql',
      modules: [{ name: 'gatsby', identifier: 'graphql' }],
    },
},

Environment:

Windows 10, "gatsby-plugin-ts": "^2.7.1", "gatsby": "^2.27.2", "gatsby-image": "^2.6.0",

Any corrections/suggestions appreaciated! Thanks!