gatsby#useStaticQuery JavaScript Examples

The following examples show how to use gatsby#useStaticQuery. 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: bg.js    From about-1hive with GNU General Public License v3.0 6 votes vote down vote up 
BG = () => {
  const data = useStaticQuery(graphql`
    {
      noise: file(relativePath: { eq: "noise.png" }) {
        childImageSharp {
          fluid(quality: 100, maxWidth: 800) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `)

  return (
    <StyledBG>
      <StyledRed />
      <StyledNoise fluid={data.noise.childImageSharp.fluid} />
    </StyledBG>
  )
}
Example #2
Source File: profilepic.js    From blog with Apache License 2.0 6 votes vote down vote up 
ProfilePic = (props) => {
  const data = useStaticQuery(graphql`
    query ProfilePicQuery {
      avatar: allFile(filter: { absolutePath: { regex: "/authors/" } }) {
        edges {
          node {
            name
            childImageSharp {
              fixed(width: 50, height: 50) {
                ...GatsbyImageSharpFixed
              }
            }        
          }
        }
      }
    }
  `);

  const profilePic = data.avatar.edges.find(item => item.node.name === props.identifier);
  if (!profilePic) {
    return null;
  }

  return (
    <Image
      fixed={profilePic.node.childImageSharp.fixed}
      alt={props.name}
      style={{
        marginRight: rhythm(1 / 2),
        marginBottom: 0,
        minWidth: 50,
        borderRadius: "100%",
      }}
      imgStyle={{
        borderRadius: "50%",
      }}
    />
  );
}
Example #3
Source File: AboutMe.js    From ResumeOnTheWeb-Gatsby with MIT License 6 votes vote down vote up 
AboutMe = () => {
  const data = useStaticQuery(graphql`
    {
      photo: file(relativePath: { eq: "about-me/selfie-boy.png" }) {
        childImageSharp {
          gatsbyImageData(width: 512, layout: CONSTRAINED)
        }
      }
      markdownRemark(frontmatter: { id: { eq: "about-me" } }) {
        html
      }
    }
  `);

  return (
    <section id="about-me">
      <Heading icon={MdPerson} title="About Me" />

      <div className="grid lg:grid-cols-6 gap-12 items-center">
        <div className="hidden md:block lg:col-span-2 w-1/3 lg:w-3/4 mx-auto wow fadeInLeft">
          <GatsbyImage
            image={data.photo.childImageSharp.gatsbyImageData}
            alt="Smiling Cartoon Boy with Phone and Backpack"
          />
        </div>
        <div
          className="text-justify lg:col-span-4 wow fadeIn"
          dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
        />
      </div>
    </section>
  );
}
Example #4
Source File: contentful-content.js    From website with Apache License 2.0 6 votes vote down vote up 
beforeEach(() => {
  useStaticQuery.mockImplementation(() => ({
    site: {
      siteMetadata: {
        contentfulSpace: '1234',
      },
    },
  }))
})
Example #5
Source File: Devoxx4Kids.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
Devoxx4Kids = () => {
  const data = useStaticQuery(graphql`
    {
      placeholderImage: file(
        relativePath: { eq: "devoxx4kids/devoxx4kids.png" }
      ) {
        childImageSharp {
          gatsbyImageData(width: 300, layout: CONSTRAINED)
        }
      }
    }
  `);

  return (
    <GatsbyImage
      image={data.placeholderImage.childImageSharp.gatsbyImageData}
    />
  );
}
Example #6
Source File: image.js    From dnp-website 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 #7
Source File: index.js    From gatsby-blog-mdx with MIT License 6 votes vote down vote up 
Image = () => {
  const data = useStaticQuery(graphql`
    query {
      images: allFile {
        edges {
          node {
            relativePath
            name
            childImageSharp {
              fluid(maxWidth: 300, maxHeight: 300) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `)
  // Loop through all files to find file that matches with image path
  const image = data.images.edges.find(n => {
    return n.node.relativePath.includes(config.profileImageName)
  })
  if (!image) {
    return null
  }

  return (
    <Img className="img-profile" fluid={image.node.childImageSharp.fluid} />
  )
}
Example #8
Source File: ConferenceSponsors.js    From utahjs-gatsby with BSD Zero Clause License 6 votes vote down vote up 
Sponsors = () => {
  const data = useStaticQuery(graphql`
    query {
      allSanitySponsors {
        nodes {
          altText
          sponsorUrl
          sponsor {
            asset {
              fixed(width: 185) {
                ...GatsbySanityImageFixed
              }
            }
          }
        }
      }
    }
  `);
  return (
    <Wrapper>
      <h2>Thank you to our 2021 sponsors!</h2>
      <div className="wrapper">
        {data.allSanitySponsors.nodes.map((sponsor, id) => (
          <div className="spacer" key={`sponsor${id}`}>
            <a href={sponsor.sponsorUrl} target="_blank" rel="noreferrer">
              <Img fixed={sponsor.sponsor.asset.fixed} alt={sponsor.altText} />
            </a>
            <br />
          </div>
        ))}
      </div>
    </Wrapper>
  );
}
Example #9
Source File: layout.js    From fullstack-serverless-graphql-docs with MIT License 6 votes vote down vote up 
Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />

      <main className="p-4">{children}</main>

      <Footer />
    </>
  )
}
Example #10
Source File: useBackgroundsAssets.js    From halo-lab with MIT License 6 votes vote down vote up 
useBackgroundsAssets = () => {
  const data = useStaticQuery(graphql`
    query {
      starsBig: file(relativePath: { eq: "backgrounds/stars-big.svg" }) {
        publicURL
      }
      starsSmall: file(relativePath: { eq: "backgrounds/stars-small.svg" }) {
        publicURL
      }
    }
  `);

  return data;
}
Example #11
Source File: withReleaseInfo.js    From hitw-landing-page with MIT License 6 votes vote down vote up 
withReleaseInfo = (Component) => {
  function ReleaseInfoHOC(props) {
    const data = useStaticQuery(graphql`
      query {
        gitBranch(current: { eq: true }) {
          ...GitInfo
        }
      }
    `);
    return <Component release={data.gitBranch.commit} {...props} />;
  }
  return ReleaseInfoHOC;
}
Example #12
Source File: button.js    From CODE-CAMP-2020 with MIT License 6 votes vote down vote up 
Button = (props) => {
  const data = useStaticQuery(graphql`
    query ButtonQuery {
      avatar: file(absolutePath: { regex: "/Iste.jpg/" }) {
        childImageSharp {
          fixed(width: 500, height: 100) {
            ...GatsbyImageSharpFixed
          }
        }
      }
      site {
        siteMetadata {
          author {
            name
            summary
          }
          social {
            twitter
          }
        }
      }
    }
  `)

  const { author, social } = data.site.siteMetadata
  return (
    <div
      style={{
         marginLeft:"60%",
       alignItems:'center',
        flexDirection: `row`,
       }}
    >
   
    <p style={{backgroundColor:"#ea907a", color:"white" , borderRadius:20, textAlign:"center" }}>{props.headings}</p> 

    </div>
  )
}
Example #13
Source File: layout.js    From tmc-wiki with MIT License 6 votes vote down vote up 
Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
// <Header siteTitle={data.site.siteMetadata.title} />
  return (
    <>
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 1100,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <Nav/>
        <div className="space"></div>
        <main id="main">{children}</main>
        <Footer/>
      </div>
    </>
  )
}
Example #14
Source File: image.jsx    From ambition-fund-website with MIT License 6 votes vote down vote up 
Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "logo.png" }) {
        childImageSharp {
          fluid(maxWidth: 50) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return <StyledImage fluid={data.placeholderImage.childImageSharp.fluid} />
}
Example #15
Source File: seo.jsx    From markdown-dungeon with MIT License 6 votes vote down vote up 
export default function Seo({ title, description, image, article }) {
  const { pathname } = useLocation();
  const { site } = useStaticQuery(query);
  const {
    defaultTitle,
    defaultDescription,
    siteUrl,
    defaultImage,
  } = site.siteMetadata;
  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`,
    url: `${siteUrl}${pathname}`,
  };
  return (
    <Helmet title={seo.title}>
      <meta name='title' content={seo.title} />
      <meta name='description' content={seo.description} />
      <meta name='image' content={seo.image} />
      {seo.url && <meta property='og:url' content={seo.url} />}
      {(article ? true : null) && <meta property='og:type' content='article' />}
      {seo.title && <meta property='og:title' content={seo.title} />}
      {seo.description && (
        <meta property='og:description' content={seo.description} />
      )}
      {seo.image && <meta property='og:image' content={seo.image} />}
      <meta name='twitter:card' content='summary_large_image' />
      {seo.title && <meta name='twitter:title' content={seo.title} />}
      {seo.description && (
        <meta name='twitter:description' content={seo.description} />
      )}
      {seo.image && <meta name='twitter:image' content={seo.image} />}
    </Helmet>
  );
}
Example #16
Source File: Layout.js    From gatsby-apollo-wpgraphql-jwt-starter with MIT License 6 votes vote down vote up 
Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <Navigation/>
        <main>{children}</main>
        <footer>

        </footer>
      </div>
    </>
  )
}
Example #17
Source File: Image.js    From Simplicity-Itself-Gatsby-Tailwind-Starter-Theme 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 #18
Source File: index.jsx    From devfolio 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
          }
        }
      }
    }
  `);

  if (!data?.placeholderImage?.childImageSharp?.fluid) {
    return <div>Picture not found</div>;
  }

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
}
Example #19
Source File: footer.js    From about-1hive with GNU General Public License v3.0 5 votes vote down vote up 
Footer = () => {
  const data = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          commit
          repository
          menulinks {
            name
            sublinks {
              description
              name
              link
            }
          }
          title
        }
      }
    }
  `)

  // const themeContext = useContext(ThemeManagerContext)

  return (
    <StyledFooter>
      <StyledSection>
        <StyledFooterSection>
          {/* TODO: add email subscriptions <EmailSection /> */}
          <Commit>
            Deployed commit:{' '}
            <code>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href={`${data.site.siteMetadata.repository}/commit/${data.site.siteMetadata.commit}`}
              >
                {data.site.siteMetadata.commit.substring(0, 7)}
              </a>
            </code>
          </Commit>
          <p>© 2021 1Hive</p>
          {/* <div>
            <label>
              <input type="checkbox" onChange={() => themeContext.toggleDark()} checked={themeContext.isDark} /> Dark
              mode
            </label>
          </div> */}
        </StyledFooterSection>
      </StyledSection>
      <StyledSection>
        {data.site.siteMetadata.menulinks.map(item => {
          return (
            <StyledFooterSectionNav key={item.name}>
              <h4 style={{ fontWeight: 700, marginBottom: '1rem' }}>{item.name}</h4>
              <Dropdown links={item.sublinks} />
            </StyledFooterSectionNav>
          )
        })}
      </StyledSection>
    </StyledFooter>
  )
}
Example #20
Source File: seo.js    From blog with Apache License 2.0 5 votes vote down vote up 
SEO = ({ description, lang, meta, title, twitterCard }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            siteUrl
            description
            social {
              twitter
            }
          }
        }
      }
    `
  );

  const metaDescription = description || site.siteMetadata.description;

  if (twitterCard == null) {
    twitterCard = adoptSocialImage;
  }

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: "description",
          content: metaDescription,
        },
        {
          property: "og:title",
          content: title,
        },
        {
          property: "og:description",
          content: metaDescription,
        },
        {
          property: "og:image",
          content: site.siteMetadata.siteUrl + twitterCard,
        },
        {
          property: "og:type",
          content: "website",
        },
        {
          name: "twitter:card",
          content: "summary_large_image",
        },
        {
          name: "twitter:creator",
          content: site.siteMetadata.social.twitter,
        },
        {
          name: "twitter:site",
          content: site.siteMetadata.social.twitter,
        },
        {
          name: "twitter:title",
          content: title,
        },
        {
          name: "twitter:description",
          content: metaDescription,
        },
        {
          name: "twitter:image",
          content: site.siteMetadata.siteUrl + twitterCard,
        },
      ].concat(meta)}
    />
  );
}
Example #21
Source File: SEO.js    From ResumeOnTheWeb-Gatsby with MIT License 5 votes vote down vote up 
SEO = () => {
  const { site, file } = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          title
          description
          author
        }
      }
      file(relativePath: { eq: "share.png" }) {
        publicURL
      }
    }
  `);

  const title = site.siteMetadata.title;
  const description = site.siteMetadata.description;
  const author = site.siteMetadata.author;
  const image = file.publicURL;

  return (
    <Helmet
      htmlAttributes={{ lang: "en" }}
      defer={false}
      title={title}
      meta={[
        {
          name: `description`,
          content: description,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: description,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          property: "og:image",
          content: image,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: description,
        },
        {
          name: "twitter:card",
          content: "summary_large_image",
        },
      ]}
    />
  );
}
Example #22
Source File: header.js    From Corona-Freebies-List with MIT License 5 votes vote down vote up 
Header = () => {
  const data = useStaticQuery(graphql`
    query {
      file(sourceInstanceName: { eq: "images" }, name: { eq: "icon" }) {
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid_tracedSVG
          }
        }
      }
    }
  `)
  return (
    <header
      css={css`
        background: #fff;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0.5rem calc((100vw - 1000px) / 2); /* for header both side equal margin,this will be of equal width of main */

        @media (max-width: 1000px) {
          padding: 10px 10px 0 10px;
        }
      `}
    >
      <div style={{ display: "flex" }}>
        <Img
          fluid={data.file.childImageSharp.fluid}
          alt=""
          style={{ padding: "0px", width: "70px" }}
        />
        <NavLink to="/" style={{ alignSelf: "center", padding: "0px" }}>
          Corona Freebies
        </NavLink>
      </div>
      <nav
        css={css`
          margin-top: 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        `}
      >
        <NavLink to="/" activeClassName="current-page">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="current-page">
          About
        </NavLink>
      </nav>
    </header>
  )
}
Example #23
Source File: header.js    From website with Apache License 2.0 5 votes vote down vote up 
beforeEach(() => {
  StaticQuery.mockImplementation(({ render }) =>
    render({
      site: {
        siteMetadata: {
          production: true,
        },
      },
    }),
  )

  useStaticQuery.mockImplementation(() => ({
    allContentfulNavigationGroup: {
      nodes: [
        {
          slug: 'test-a',
          pages: [
            {
              title: 'Contentful a',
              link: '/contentful-a',
            },

            {
              title: 'Contentful B',
              link: '/contentful-b',
            },
          ],
        },
      ],
    },
    navigationYaml: {
      items: [
        {
          link: '/test-a',
          title: 'Test A',
          subNavigation: 'test-a',
        },
        {
          link: '/test-b',
          title: 'Test B',
        },
      ],
    },
  }))
})