gatsby#graphql TypeScript Examples

The following examples show how to use gatsby#graphql. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ShareView.tsx    From Frontend with MIT License 6 votes vote down vote up 
query = graphql`
  query ShareView {
    site {
      siteMetadata {
        title
      }
    }
  }
`
Example #2
Source File: Faq.tsx    From pola-web with MIT License 6 votes vote down vote up 
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>
  );
}
Example #3
Source File: ConditionalPortfolio.tsx    From MLH-Fellow-Map with MIT License 6 votes vote down vote up 
pageQuery = graphql`
  query ConditionalPortfolio($id: String) {
    mdx(id: { eq: $id }) {
      body
      frontmatter {
        bio
        github
        lat
        linkedin
        long
        name
        profilepic
        title
        twitter
      }
    }
    allImageSharp {
      nodes {
        fluid(maxHeight: 200, maxWidth: 200) {
          src
          originalName
        }
      }
    }
  }
`
Example #4
Source File: index.tsx    From gatsby-markdown-typescript-personal-website with MIT License 6 votes vote down vote up 
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>
  );
}
Example #5
Source File: Categories.tsx    From checklist with MIT License 6 votes vote down vote up 
categoriesFragment = graphql`
  fragment CategoryList on MarkdownRemarkConnection {
    group(field: frontmatter___category) {
      fieldValue
      totalCount

      nodes {
        frontmatter {
          tags
        }
      }
    }
  }
`
Example #6
Source File: use-minimal-blog-config.tsx    From carlosazaustre.es with MIT License 6 votes vote down vote up 
useMinimalBlogConfig = () => {
  const data = useStaticQuery<Props>(graphql`
    query {
      minimalBlogConfig {
        basePath
        blogPath
        postsPath
        pagesPath
        tagsPath
        externalLinks {
          name
          url
        }
        navigation {
          title
          slug
        }
        showLineNumbers
      }
    }
  `)

  return data.minimalBlogConfig
}
Example #7
Source File: Footer.tsx    From defund12.org with MIT License 6 votes vote down vote up 
/**
 * The site footer, containing issue request and contact information.
 * @return {React.ReactNode}
 */
export default function Footer(): JSX.Element {
  return (
    <StaticQuery
      query={graphql`
        query FooterQuery {
          siteConfig {
            footerTextPr
            footerTextInstructions
            contactEmailFooter
          }
        }
      `}
      render={(data: { siteConfig: FooterProps }) => (
        <_Footer {...data.siteConfig} />
      )}
    />
  );
}
Example #8
Source File: image.tsx    From gatsby-theme-pristine with Apache License 2.0 6 votes vote down vote up 
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} />;
}
Example #9
Source File: AuthorList.tsx    From nyxo-website with MIT License 6 votes vote down vote up 
queryEN = graphql`
  query {
    allContentfulAuthor(filter: { node_locale: { eq: "en-US" } }) {
      edges {
        node {
          ...AuthorFragment
        }
      }
    }
    allMarkdownRemark(
      filter: { fileAbsolutePath: { regex: "/content/blog/" } }
    ) {
      edges {
        node {
          id
          excerpt
          frontmatter {
            authorSlug
          }
        }
      }
    }
  }
`
Example #10
Source File: useHookList.ts    From usehooks-ts with MIT License 6 votes vote down vote up 
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
}
Example #11
Source File: useSiteMetadata.ts    From lesesalen with MIT License 6 votes vote down vote up 
useSiteMetadata = (): SiteMetadata => {
  const { site } = useStaticQuery<{
    site: { siteMetadata: SiteMetadata };
  }>(graphql`
    query SiteMetadata {
      site {
        siteMetadata {
          siteUrl
          title
          description
          author {
            name
            summary
          }
        }
      }
    }
  `);

  return site.siteMetadata;
}
Example #12
Source File: LayoutInner.tsx    From mantine with MIT License 6 votes vote down vote up 
query = graphql`
  {
    allMdx {
      edges {
        node {
          id
          frontmatter {
            group
            title
            order
            slug
            category
            description
            package
            search
          }
        }
      }
    }
  }
`
Example #13
Source File: image.tsx    From mswjs.io with MIT License 6 votes vote down vote up 
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} />
}
Example #14
Source File: history.tsx    From mtcute with GNU Lesser General Public License v3.0 6 votes vote down vote up 
query = graphql`
    query {
        layers: allHistoryJson {
            nodes {
                layer
                rev
                source {
                    website
                    date(formatString: "DD-MM-YYYY")
                    commit
                    file
                }
            }
        }
    }
`
Example #15
Source File: blog.tsx    From web with Apache License 2.0 6 votes vote down vote up 
pageQuery = graphql`
  query ($path: String!) {
    mdx(frontmatter: { path: { eq: $path } }) {
      body
      timeToRead
      frontmatter {
        path
        title
        author
        overline
        subtitle
        seo {
          title
          description
          keywords
          canonical
        }
        publishedAt(formatString: "MMMM DD, YYYY")
      }
    }
  }
`
Example #16
Source File: index.tsx    From website-docs with MIT License 6 votes vote down vote up 
query = graphql`
  query {
    locales: allLocale {
      edges {
        node {
          ns
          data
          language
        }
      }
    }
  }
`
Example #17
Source File: Layout.tsx    From website-v2 with BSD Zero Clause License 6 votes vote down vote up 
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>
  )
}
Example #18
Source File: TagsContainer.tsx    From gatsby-personal-site with MIT License 6 votes vote down vote up 
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} />
}
Example #19
Source File: layout.tsx    From blog.ojisan.io with MIT License 6 votes vote down vote up 
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>
    </>
  );
}
Example #20
Source File: image.tsx    From vhealth-gatsby with MIT License 6 votes vote down vote up 
Image = (props: { filename: any; alt: string | undefined }) => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename)
      })
      if (!image) {
        return null
      }

      //const imageSizes = image.node.childImageSharp.sizes; sizes={imageSizes}
      return <Img alt={props.alt} fluid={image.node.childImageSharp.fluid} />
    }}
  />
)
Example #21
Source File: image.tsx    From color-copy-paste with MIT License 6 votes vote down vote up 
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
      }
    />
  )
}
Example #22
Source File: layout.tsx    From website with MIT License 6 votes vote down vote up 
query = graphql`
	query {
		site {
			siteMetadata {
				defaultTitle: title
				titleTemplate
				defaultDescription: description
				baseUrl
			}
		}
	}
`
Example #23
Source File: index.tsx    From WebSheets-Listing-Page with MIT License 6 votes vote down vote up 
siteData = graphql`
  query SiteSheetQuery {
    siteSheetsData {
      siteName
      siteLogo
      sitePrimaryColor
      darkMode
      heroType
      heroTitle
      heroDescription
      heroButtonLabel
      heroButtonUrl
      socialShareButton
      listingCategoryType
      listingCardType
      listingCardSize
      listingDescriptionButtonLabel
      listingUrlButtonLabel
      footerLabel
      facebookUrl
      instagramUrl
      twitterUrl
    }
    allListingSheetsData {
      nodes {
        title
        actionUrl
        categories
        subtitle
        description
        image
        hide
      }
    }
  }
`
Example #24
Source File: useCoreOptions.ts    From gatsby-theme-shopify-manager with MIT License 6 votes vote down vote up 
export function useCoreOptions() {
  const {coreOptions}: CoreOptionsQueryShape = useStaticQuery(graphql`
    query CoreOptionsQuery {
      coreOptions(id: {eq: "gatsby-theme-shopify-manager"}) {
        shopName
        accessToken
      }
    }
  `);

  return coreOptions;
}
Example #25
Source File: index.tsx    From blog.uhy.ooo with MIT License 6 votes vote down vote up 
query = graphql`
  fragment ArticleInList on Mdx {
    excerpt
    fields {
      slug
    }
    frontmatter {
      published
      updated
      title
      tags
    }
  }
`
Example #26
Source File: elements.tsx    From Frontend with MIT License 5 votes vote down vote up 
Footer: React.FC = () => {
  const {
    site: {
      buildTime,
      siteMetadata: { privacyLink, termsOfServiceLink, cookiePolicyLink }
    }
  } = useStaticQuery<FooterQuery>(graphql`
    query FootQuery {
      site {
        buildTime(formatString: "ddd, DD-MM-YYYY HH:mm")
        siteMetadata {
          privacyLink
          termsOfServiceLink
          cookiePolicyLink
        }
      }
    }
  `);
  return (
    <Box as="footer" mt="10em">
      <Text fontSize="xs" as="p">
        <Link as={IntlLink} to={privacyLink} marginRight=".5em">
          <FormattedMessage id="Footer.Privacy Policy" />
        </Link>
        <Link as={IntlLink} to={termsOfServiceLink} marginRight=".5em">
          <FormattedMessage id="Footer.Terms of Service" />
        </Link>
        <Link as={IntlLink} to={cookiePolicyLink}>
          <FormattedMessage id="Footer.Cookie Policy" />
        </Link>
      </Text>
      <Text fontSize="xs" as="p">
        <FormattedMessage id="Footer.rights" />{' '}
      </Text>
      <Text fontSize="xs" as="p">
        <FormattedMessage
          id="Footer.cute"
          values={{
            span: (...chunks) => <span role="img">{chunks}</span>,
            buildTime
          }}
        />
      </Text>
    </Box>
  );
}
Example #27
Source File: article-service.ts    From pola-web with MIT License 5 votes vote down vote up 
ArticleService = {
  getArticles: async (): Promise<IArticlesSuccess> => {
    return {
      results: articles,
    };
  },
  getAll: () =>
    useStaticQuery(
      graphql`
        {
          allMarkdownRemark(filter: { fileAbsolutePath: { regex: "//posts//" } }, limit: 1000) {
            edges {
              node {
                id
                wordCount {
                  paragraphs
                  sentences
                  words
                }
                fields {
                  prefix
                  slug
                }
                frontmatter {
                  title
                  subTitle
                  category
                  cover {
                    extension
                    name
                    childImageSharp {
                      id
                      fixed {
                        src
                        originalName
                        width
                        height
                      }
                      fluid {
                        originalName
                        src
                        presentationWidth
                        presentationHeight
                        aspectRatio
                      }
                    }
                    relativePath
                  }
                }
              }
            }
          }
        }
      `
    ),
}