We left off with our avatar component working using Gatsby Image and still able to receive an image url. Now, let's look at what it would take to type this component. I like to use
type instead of
interface for the props. You can read more about the difference between type and interface if you'd like.
The props type will look something like this:
The cool part here is that the
user prop can be typed to match the graphql alias names. This helps anyone consuming this component know the values they can pass.
Let's take a look at typing our data variable. We know the shape of what we expect because of our graphql. We just need to provide the correct typing at the childImageSharp level. Luckily Gatsby Image has a type of
FixedObject that can help us out here. We pass the type to the static query hook like
useStaticQuery<Data>(graphql to signify that we expect the return to be
Let's refactor the redundancy in the
Cool, now we should have something like this:
Thanks for following along!