Import multiple variables to Gatsby component with TS and GraphQL Typegen

Sebastian Berg 0
Viewed 16
  import { graphql } from 'gatsby';

  const Footer = ({phone}: { phone?: Queries.FooterFragment['phone'];}): JSX.Element => {
    return <footer>{phone}</footer>;
        };
  export default Footer

  export const query = graphql`
    fragment Footer on ContentfulBlockFooter {
      id
      name
      phone
    }`;

This is a component from a Gatsby project that uses TS and GraphQL Typegen, the document only shows how to import a single value from my Fragment, is there a clever way to "spread out" my Queries. In this case I want to have id, name and phone as component props without typing:

phone?: Queries.FooterFragment['phone'],
name?: Queries.FooterFragment['name'],
id?: Queries.FooterFragment['id]
gatsby graphql typescript
1 Answers

Have you tried using an interface?

interface FooterProps {
  phone?: Queries.FooterFragment['phone'],
  name?: Queries.FooterFragment['name'],
  id?: Queries.FooterFragment['id]
}

Then:

  const Footer = ({ phone }: FooterProps }): JSX.Element => {
    return <footer>{phone}</footer>;
  };

I'm not sure about the context but you may not need to use Queries.FooterFragment but using directly the type of each element:

interface FooterProps {
  phone?: string,
  name?: string,
  id?: string
}
Ferran Buireu0
Related