gatsby#useStaticQuery TypeScript Examples

HeroBanner: React.FC = () => {
  const { markdownRemark } = useStaticQuery(graphql`
    query {
      markdownRemark(frontmatter: { category: { eq: "hero section" } }) {
        frontmatter {
          title
          subtitle
          content
          linkTo
          linkText
        }
      }
    }
  `);

  const heroBanner: SectionHeroBanner = markdownRemark.frontmatter;

  return (
    <Banner
      title={heroBanner.title}
      subtitle={heroBanner.subtitle}
      content={heroBanner.content}
      linkTo={heroBanner.linkTo}
      linkText={heroBanner.linkText}
    />
  );
}

AuthorList: FC<Props> = ({ locale }) => {
  const {
    allContentfulAuthor: { edges: authors },
    allMarkdownRemark: { edges: blogPosts },
  } = useStaticQuery(queryEN)

  return (
    <Authors>
      {authors.map(({ node: author }: { node: ContentfulAuthor }) => (
        <AuthorCard
          key={author.id}
          author={author}
          blogPosts={blogPosts.filter(
            ({ node: post }) => post?.frontmatter?.authorSlug === author.slug
          )}
        />
      ))}
    </Authors>
  )
}

export function FeedbackDoc({ pathConfig, filePath }: Props) {
  const { site } = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          siteUrl
        }
      }
    }
  `)
  let { pathname } = useLocation()
  if (pathname.endsWith('/')) {
    pathname = pathname.slice(0, -1) // unify client and ssr
  }

  return (
    <a
      className="doc-help-link feedback"
      href={`https://github.com/${getRepo(
        pathConfig
      )}/issues/new?body=File:%20[/${pathConfig.branch}/${filePath}](${
        site.siteMetadata.siteUrl
      }${pathname})`}
      target="_blank"
      rel="noreferrer">
      <Trans i18nKey="doc.feedback" />
    </a>
  )
}

LessonsPreview: FC = () => {
  const { allContentfulLessonEN } = useStaticQuery(graphql`
    {
      allContentfulLessonEN: allContentfulLesson(
        filter: { node_locale: { eq: "en-US" } }
        limit: 5
      ) {
        edges {
          node {
            ...LessonFragment
          }
        }
      }
    }
  `) as { allContentfulLessonEN: { edges: { node: ContentfulLesson }[] } }

  return (
    <Container>
      <H5>Lessons</H5>

      <MobilePhone>
        {allContentfulLessonEN.edges.map(({ node }) => (
          <MobileLessonCard
            key={node.lessonName}
            title={node.lessonName}
            author={node.author}
          />
        ))}
      </MobilePhone>
    </Container>
  )
}

Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `);

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
}

TagFilter = () => {
  const data = useStaticQuery(graphql`
    query TagQuery {
      tags: allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/content/blog/" } }
      ) {
        group(field: frontmatter___tags) {
          tag: fieldValue
          totalCount
        }
      }
    }
  `)
  const tags = data?.tags?.group
  const tagCount = 3
  return (
    <TagList>
      {tags?.slice(0, tagCount).map(({ tag, totalCount }: any) => {
        return (
          <TagLinkLI key={tag}>
            <TagLink data-count={totalCount} to={`/tags/${kebabCase(tag)}/`}>
              {tag}
            </TagLink>
          </TagLinkLI>
        )
      })}
      <TagLinkLI>
        <TagLinkMoreTags to={`/tags`}>All Tags</TagLinkMoreTags>
      </TagLinkLI>
    </TagList>
  )
}

TagsContainer: React.FC = () => {
  const data = useStaticQuery(graphql`
    query TagsQuery {
      allMarkdownRemark(filter: {frontmatter: {published: {ne: false}}}) {
        group(field: frontmatter___tags) {
          fieldValue
          totalCount
        }
      }
    }
  `)

  const tags: Tag[] =
    data.allMarkdownRemark &&
    data.allMarkdownRemark.group.sort(
      (a: Tag, b: Tag) => b.totalCount - a.totalCount
    )

  return <Tags tags={tags} />
}

useSiteMetadata = () => {
  const data = useStaticQuery<Props>(graphql`
    query {
      site {
        siteMetadata {
          siteTitle
          siteTitleAlt
          siteUrl
          siteDescription
          siteLanguage
          author
        }
      }
    }
  `)

  return data.site.siteMetadata
}

TagListContainer: FC<Props> = ({ current, className, limit }) => {
  const data: TagsQueryQuery = useStaticQuery(graphql`
    query TagsQuery {
      tags: allMarkdownRemark {
        group(field: frontmatter___tags) {
          tag: fieldValue
          totalCount
        }
      }
    }
  `);

  const sortedTags = data.tags.group.sort((t1, t2) => t2.totalCount - t1.totalCount);

  return (
    <TagList
      tags={sortedTags.map(t => t.tag || '').slice(0, limit)}
      current={current}
      className={cx('o-page-taglist', className)}
    />
  );
}

Layout: FC = ({ children }) => {
  const data = useStaticQuery<GatsbyTypes.SiteTitleQuery>(graphql`
    query SiteTitle {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  const title = data?.site?.siteMetadata?.title;

  if (title === undefined || title === null) {
    throw new Error("title should be");
  }

  return (
    <>
      <Header siteTitle={title} />
      <div className={wrapper}>
        <main>{children}</main>
        <footer className={footer}>
          <div>
            please HELP ME!!{" "}
            <a href="https://patron.ojisan.io">patron.ojisan.io</a>
          </div>
          <div>
            © {new Date().getFullYear()}, Built with
            {` `}
            <a href="https://www.gatsbyjs.com">Gatsby</a>
          </div>
        </footer>
      </div>
    </>
  );
}

Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
}

Layout = ({ children }: Props) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <React.Fragment>
      <Header />
      <Box
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        {children}
      </Box>
      <Footer />
    </React.Fragment>
  )
}

FeatureGrid = () => {
  const { forYou } = useStaticQuery(graphql`
    query FeaturesQuery {
      forYou: pagesJson {
        features {
          icon
          text
          title
        }
      }
    }
  `)
  return (
    <FeatureSection>
      <H2>Features</H2>
      <Grid>
        {forYou.features.map((feature: any, index: number) => (
          <Column key={index}>
            <Icon name={feature.icon} width="50px" height="50px" />
            <Content>
              <Title>{feature.title}</Title>
              <Text>{feature.text}</Text>
            </Content>
          </Column>
        ))}
      </Grid>
    </FeatureSection>
  )
}

Newsletter: React.FC = () => {
  const { markdownRemark } = useStaticQuery(graphql`
    query {
      markdownRemark(frontmatter: { category: { eq: "newsletter section" } }) {
        frontmatter {
          title
          subtitle
          namePlaceholder
          emailPlaceholder
          submitPlaceholder
        }
      }
    }
  `);

  const newsletter: Newsletter = markdownRemark.frontmatter;

  return (
    <Styled.Newsletter>
      <Container section>
        <TitleSection title={newsletter.title} subtitle={newsletter.subtitle} center />
        <Styled.Form>
          <Styled.Input type="text" placeholder={newsletter.namePlaceholder} />
          <Styled.Input type="email" placeholder={newsletter.emailPlaceholder} />
          <Button primary block>
            {newsletter.submitPlaceholder}
          </Button>
        </Styled.Form>
      </Container>
    </Styled.Newsletter>
  );
}

BusinessTemplate = () => {
  const data: IBusinessTemplate = useStaticQuery(graphql`
    {
      allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/business/" } }) {
        nodes {
          frontmatter {
            title
            slug
            cover {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            icon {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
          html
        }
      }
    }
  `);

  return <BusinessElements data={data} />;
}

GetAppBanner: FC = () => {
  const data = useStaticQuery(graphql`
    {
      apple: file(name: { eq: "app-store-button" }) {
        publicURL
      }
      android: file(name: { eq: "playstore-button" }) {
        publicURL
      }
    }
  `)
  const { t } = useTranslation()

  return (
    <CallToAction>
      <H2>{t("GET_THE_APP.TITLE")}</H2>
      <Description>{t("GET_THE_APP.TEXT")}</Description>

      <Buttons>
        <Button
          href="https://apps.apple.com/app/nyxo/id1440417031"
          target="_new"
          rel="noopener noreferrer">
          <img alt={"App Store"} src={data?.apple?.publicURL} />
        </Button>
        <Button
          href="https://play.google.com/store/apps/details?id=fi.nyxo.app"
          target="_new"
          rel="noopener noreferrer">
          <img alt={"Google Play"} src={data?.android?.publicURL} />
        </Button>
      </Buttons>
    </CallToAction>
  )
}

function useSiteMetadata() {
  const data = useStaticQuery<Query>(graphql`
    {
      site {
        siteMetadata {
          title
          description
          siteUrl
          author
        }
      }
    }
  `)

  // Return directly wanted data
  return data.site.siteMetadata
}

useInviteUrl = (props?: UseInviteUrl) => {
  const { profile } = useAuth();
  const { locale } = useIntl();

  let uid;
  if (props && props.uid) {
    uid = props.uid;
  } else if (profile && profile.uid) {
    uid = profile.uid;
  }

  const {
    site: {
      siteMetadata: { siteUrl }
    }
  } = useStaticQuery<UseInviteQuery>(query);
  const relativeUrl = `/${locale}/me/invite/${uid}`;
  const absoluteUrl = `${siteUrl}${relativeUrl}`;
  return profile
    ? { absoluteUrl, relativeUrl }
    : { absoluteUrl: null, relativeUrl: null };
}

Faq = () => {
  const data: IFaqNode = useStaticQuery(graphql`
    {
      faqJson {
        faq {
          id
          question
          answer
        }
      }
    }
  `);

  return (
    <Wrapper id="faq">
      <Section>
        <TitleSection>FAQ</TitleSection>
        <AccordionList list={data.faqJson.faq} />
      </Section>
    </Wrapper>
  );
}

function useHookList(): GroupedHookList {
  const data = useStaticQuery<GroupedHookList>(graphql`
    {
      posts: allMdx(filter: { fields: { type: { eq: "post" } } }) {
        nodes {
          ...Post
        }
      }
      hooks: allMdx(filter: { fields: { type: { eq: "hook" } } }) {
        nodes {
          ...HookNode
        }
      }
      demos: allMdx(filter: { fields: { type: { eq: "demo" } } }) {
        nodes {
          ...HookNode
        }
      }
    }
  `)

  return data
}

FriendsService = {
  getFriends: async (): Promise<IFriendsSuccess> => {
    return {
      results: friends,
    };
  },
  getAll: () =>
    useStaticQuery(
      graphql`
        {
          allLogosFriendsYaml {
            nodes {
              id
              name
              description
              image {
                base
              }
              page
              slug
            }
          }
        }
      `
    ),
}

export function useCoreOptions() {
  const {coreOptions}: CoreOptionsQueryShape = useStaticQuery(graphql`
    query CoreOptionsQuery {
      coreOptions(id: {eq: "gatsby-theme-shopify-manager"}) {
        shopName
        accessToken
      }
    }
  `);

  return coreOptions;
}

Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <LayoutContainer>
      <GlobalStyles />
      <SEO
        title="Reactors Homepage"
        description="A community for developers by developers"
      />
      <Header siteTitle={data.site.siteMetadata.title} />
      <main>{children}</main>
      <Footer />
    </LayoutContainer>
  )
}

useOtherPages = (): PageEntry[] => {
	const { allMarkdownRemark } = useStaticQuery(graphql`query{
		allMarkdownRemark(
			filter: {
				fileAbsolutePath: { regex: "/(/static/pages)/.*\\.md$/" }
				frontmatter: { bigbook_section: { eq: null }, hide_in_other: { ne: true } }
			}
		) {
			edges {
				node {
					frontmatter {
						title
						bigbook_section
						hide_in_other
					}
					fields {
						slug
					}
				}
			}
		}
	}`);

	return allMarkdownRemark.edges.map(({ node }) => (
		{ slug: node.fields.slug, title: node.frontmatter.title }
	));
}

useSiteMetadata = (): SiteMetadata => {
  const { site } = useStaticQuery<{
    site: { siteMetadata: SiteMetadata };
  }>(graphql`
    query SiteMetadata {
      site {
        siteMetadata {
          siteUrl
          title
          description
          author {
            name
            summary
          }
        }
      }
    }
  `);

  return site.siteMetadata;
}

Image = (props: any) => {
  const data = useStaticQuery(graphql`
    query {
      allImageSharp {
        edges {
          node {
            fluid(maxWidth: 1200) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  `)

  return (
    <Img
      style={props.style}
      fluid={
        data.allImageSharp.edges.find(element => {
          // Match string after final slash
          return element.node.fluid.src.split("/").pop() === props.src
        }).node.fluid
      }
    />
  )
}

Logo: React.FC = () => {
  const { site, placeholderImage } = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
      placeholderImage: file(relativePath: { eq: "profile.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 80) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `);

  const logoTitle: string = site.siteMetadata.title;
  const logoImage: ImageSharpFluid = placeholderImage.childImageSharp.fluid;

  return (
    <Styled.Logo to="/">
      <Styled.Image>
        <Img fluid={logoImage} alt={logoTitle} />
      </Styled.Image>
      <Styled.Text>{logoTitle}</Styled.Text>
    </Styled.Logo>
  );
}

export function LayoutInner({ children, location }: LayoutProps) {
  const navbarCollapsed = useMediaQuery(`(max-width: ${NAVBAR_BREAKPOINT}px)`);
  const shouldRenderHeader = !shouldExcludeHeader(location.pathname);
  const shouldRenderNavbar = !shouldExcludeNavbar(location.pathname) || navbarCollapsed;
  const { classes, cx } = useStyles({ shouldRenderHeader });
  const [navbarOpened, setNavbarState] = useState(false);
  const data = getDocsData(useStaticQuery(query));

  return (
    <SpotlightProvider
      actions={getActions(data)}
      searchIcon={<Search size={18} />}
      searchPlaceholder="Search documentation"
      shortcut={['mod + K', 'mod + P', '/']}
      highlightQuery
      transition={{
        in: { transform: 'translateY(0)', opacity: 1 },
        out: { transform: 'translateY(-20px)', opacity: 0 },
        transitionProperty: 'transform, opacity',
      }}
    >
      <div
        className={cx({
          [classes.withNavbar]: shouldRenderNavbar,
          [classes.withoutHeader]: !shouldRenderHeader,
        })}
      >
        {shouldRenderHeader && (
          <Header navbarOpened={navbarOpened} toggleNavbar={() => setNavbarState((o) => !o)} />
        )}

        {shouldRenderNavbar && (
          <Navbar data={data} opened={navbarOpened} onClose={() => setNavbarState(false)} />
        )}

        <main className={classes.main}>
          <div className={classes.content}>
            <ModalsProvider
              labels={{ confirm: 'Confirm', cancel: 'Cancel' }}
              modals={{ demonstration: demonstrationModal }}
            >
              <NotificationsProvider>
                <MdxProvider>{children}</MdxProvider>
              </NotificationsProvider>
            </ModalsProvider>
          </div>
        </main>
      </div>
    </SpotlightProvider>
  );
}

export function Footer() {
  const { language } = useI18next()
  const [spread, setSpread] = useState<number | undefined>(undefined)

  const { FooterLogoSVG } = useStaticQuery(graphql`
    query {
      FooterLogoSVG: file(relativePath: { eq: "pingcap-logo.svg" }) {
        publicURL
      }
    }
  `)
  const footerColumns = language === 'zh' ? zh : en

  const handleSpreadItems = (index: number) => () => {
    const screenWidth = window.screen.width
    if (screenWidth > 768) {
      return
    }

    setSpread(spread === index ? undefined : index)
  }

  return (
    <BulmaFooter className={footer}>
      <Container>
        <Columns>
          {footerColumns.map((column, index) => (
            <Column key={column.name}>
              <Title
                className={title}
                size={6}
                onClick={handleSpreadItems(index)}>
                {column.name}
                <span
                  className={clsx(spreadStyle, index === spread && clicked)}>
                  <MdAdd />
                </span>
              </Title>
              <ul className={clsx(items, index === spread && displayed)}>
                {column.items.map(item => (
                  <li key={item.name}>
                    {item.url.startsWith('/') ? (
                      <Link to={item.url}>{item.name}</Link>
                    ) : (
                      <a href={item.url} target="_blank" rel="noreferrer">
                        {item.name}
                      </a>
                    )}
                  </li>
                ))}
              </ul>
            </Column>
          ))}

          <Column>
            <Columns className={socials} multiline>
              <Socials
                className={clsx('column is-4', column)}
                locale={language as Locale}
              />
            </Columns>
          </Column>
        </Columns>

        <div className={annotations}>
          <div className={copyright}>
            ©{new Date().getFullYear()} PingCAP. All Rights Reserved.
          </div>
          <a href="https://pingcap.com" target="_blank" rel="noreferrer">
            <img className={logo} src={FooterLogoSVG.publicURL} alt="PingCAP" />
          </a>
        </div>
      </Container>
    </BulmaFooter>
  )
}