gatsby#StaticQuery JavaScript Examples

The following examples show how to use gatsby#StaticQuery. 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: PageLayout.jsx    From gatsby-starter-builder with MIT License 6 votes vote down vote up 
function PageLayout({ children }) {
  const classes = useStyles();
  return (
    <StaticQuery query={query}>
      {data => {
        const models = data.allBuilderModels;
        const header = models.header[0].content;
        const footer = models.footer[0].content;
        return (
          <div className={classes.root}>
            <div className={classes.header}>
              <BuilderComponent
                renderLink={Link}
                name="header"
                content={header}
              />
            </div>
            <div className={classes.content}>{children}</div>
            <div className={classes.footer}>
              <BuilderComponent
                renderLink={Link}
                name="footer"
                content={footer}
              />
            </div>
          </div>
        );
      }}
    </StaticQuery>
  );
}
Example #2
Source File: development-warning.js    From website with Apache License 2.0 6 votes vote down vote up 
describe('Components : Layout : Development warning', () => {
  it('is hidden in production', () => {
    StaticQuery.mockImplementationOnce(({ render }) =>
      render({
        site: {
          siteMetadata: {
            production: true,
          },
        },
      }),
    )
    const tree = renderer.create(<DevelopmentWarning />).toJSON()
    expect(tree).toBeNull()
  })

  it('is displayed in production', () => {
    StaticQuery.mockImplementationOnce(({ render }) =>
      render({
        site: {
          siteMetadata: {
            production: false,
          },
        },
      }),
    )
    const tree = renderer.create(<DevelopmentWarning />).toJSON()
    expect(tree).toMatchSnapshot()
  })
})
Example #3
Source File: layout.js    From guitar-book with MIT License 6 votes vote down vote up 
export default function Layout(props) {
  return (
    <StaticQuery
      query={graphql`
        {
          site {
            siteMetadata {
              title
              description
            }
          }
        }
      `}
      render={data => {
        const {title, description} = data.site.siteMetadata;
        return (
          <Fragment>
            <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`}>
              <meta name="description" content={description} />
            </Helmet>
            {props.children}
          </Fragment>
        );
      }}
    />
  );
}
Example #4
Source File: index.jsx    From gatsby-starter-kontent-lumen with MIT License 6 votes vote down vote up 
Layout = ({ children }) => {
  useEffect(() => {
    const plugin = KontentSmartLink.initialize({
      queryParam: 'preview-mode',
    })
    return () => {
      plugin.destroy()
    }
  })

  return (
    <StaticQuery
      query={graphql`
        {
          sitePlugin(name: { eq: "@kentico/gatsby-source-kontent" }) {
            pluginOptions
          }
        }
      `}
      render={(data) => (
        <div
          className="layout"
          data-kontent-project-id={data.sitePlugin.pluginOptions.projectId}
          data-kontent-language-codename={
            data.sitePlugin.pluginOptions.languageCodenames[0]
          }
        >
          <Helmet defaultTitle="Blog by John Doe">
            <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
          </Helmet>
          {children}
        </div>
      )}
    />
  )
}
Example #5
Source File: index.jsx    From L-J-gatsby-blog-starter with MIT License 6 votes vote down vote up 
Bio = () => (
  <StaticQuery
    query={bioQuery}
    render={data => {
      const { author, social, introduction, othersite } = data.site.siteMetadata

      return (
        <div className="bio">
          <div className="author">
            <div className="author-description">
              <Image
                className="author-image"
                fixed={data.avatar.childImageSharp.fixed}
                alt={author}
                style={{
                  borderRadius: `100%`,
                }}
              />
              <div className="author-name">
                <span className="author-name-prefix">Written by</span>
                <Link to={social.portfolio} className="author-name-content">
                  <span>{author}</span>
                </Link>
                <div className="author-introduction">{introduction}</div>
                <p className="author-socials">
                  {othersite.map((val, idx) => (
                    <a href={val.url} key={`othersite_a_tag_` + idx}>
                      {`#` + val.name}
                    </a>
                  ))}
                </p>
              </div>
            </div>
          </div>
        </div>
      )
    }}
  />
)
Example #6
Source File: image.js    From tomoblo with MIT License 6 votes vote down vote up 
Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "gatsby-icon.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
Example #7
Source File: image.js    From syntax.rocks with MIT License 6 votes vote down vote up 
Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "logo.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
Example #8
Source File: layout.js    From aws-amplify-gatsby-auth with MIT License 6 votes vote down vote up 
Layout = ({ children, data }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Helmet
          title={data.site.siteMetadata.title}
          meta={[
            { name: 'description', content: 'Sample' },
            { name: 'keywords', content: 'sample, something' },
          ]}
        >
          <html lang="en" />
        </Helmet>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: '0 auto',
            maxWidth: 960,
            padding: '0px 1.0875rem 1.45rem',
            paddingTop: 0,
          }}
        >
          {children}
        </div>
      </>
    )}
  />
)
Example #9
Source File: IndexPageQuery.js    From testnets-cardano-org with MIT License 6 votes vote down vote up 
IndexPageQuery = ({ render }) => (
  <Language.Consumer>
    {({ key: lang }) => (
      <StaticQuery
        query={graphql`
          query {
            allFile(filter:{relativePath:{glob:"content/pages/index/*.md"}}) {
              nodes{
                relativePath,
                childMarkdownRemark{
                  frontmatter {
                    content {
                      hero_content
                      hero_cta_label
                      hero_cta_href
                      available_testnets
                      tecnhical_support_content
                      technical_support_cta_label
                      technical_support_cta_href
                      more_label
                    }
                  }
                }
              }
            }
          }
        `}
        render={({ allFile }) => {
          const content = allFile.nodes.filter(node => node.relativePath === `content/pages/index/index-${lang}.md`).shift()
          if (!content || !content.childMarkdownRemark) throw new Error(`No index translations found for language ${lang}`)
          return render(content.childMarkdownRemark.frontmatter.content)
        }}
      />
    )}
  </Language.Consumer>
)
Example #10
Source File: mainContext.js    From jamstack-ecommerce with MIT License 6 votes vote down vote up 
render() {
    let state = initialState
    if (typeof window !== 'undefined') {
      const storageState = window.localStorage.getItem(STORAGE_KEY)
      if (storageState) {
        state = JSON.parse(storageState)
      }
    }
    console.log('state: ', state)

    return (
      <StaticQuery query={mainQuery}>
        { queryData => {
          return (
            <SiteContext.Provider value={{
              ...state,
               navItems: queryData,
               addToCart: this.addToCart,
               clearCart: this.clearCart,
               removeFromCart: this.removeFromCart
            }}>
             {this.props.children}
           </SiteContext.Provider>
          )
        }}
        </StaticQuery>
    )
  }
Example #11
Source File: image.js    From use-shopping-cart with MIT License 6 votes vote down vote up 
Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={(data) => (
      <Img fluid={data.placeholderImage.childImageSharp.fluid} />
    )}
  />
)
Example #12
Source File: Layout.js    From newsliner-gatsby with MIT License 6 votes vote down vote up 
DefaultLayoutSettingsQuery = props => (
    <StaticQuery
        query={graphql`
            query GhostSettings {
                allGhostSettings {
                    edges {
                        node {
                            ...GhostSettingsFields
                        }
                    }
                }
                file(relativePath: {eq: "ghost-icon.png"}) {
                    childImageSharp {
                        fixed(width: 30, height: 30) {
                            ...GatsbyImageSharpFixed
                        }
                    }
                }
            }
        `}
        render={data => <DefaultLayout data={data} {...props} />}
    />
)
Example #13
Source File: homePageLogo.js    From InTheFight with BSD Zero Clause License 6 votes vote down vote up 
HomePageLogo = () => (
  <StaticQuery
    query={graphql`
      query {
        desktop: file(relativePath: { eq: "images/logos/ITF-home-logo.png" }) {
          childImageSharp {
            fluid(quality: 100) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `}
    render={(data) => {
      const imageData = data.desktop.childImageSharp.fluid;
      return (
        <BackgroundImage
          Tag="section"
          style={{
            height: '60vh',
            width: '100vw',
            backgroundColor: 'transparent',
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
            display: 'flex',
            alignItems: 'center',
          }}
          fluid={imageData}
          backgroundColor="#040e18"
        >
          <img src={ITFLogo} alt="ITFLogo" style={{ margin: '0 35% 0 38%' }} />
        </BackgroundImage>
      );
    }}
  />
)
Example #14
Source File: AffiliatesPageQuery.js    From haskell.foundation with MIT License 6 votes vote down vote up 
AffiliatesPageQuery = ({ render }) => (
  <Language.Consumer>
    {({ key: lang }) => (
      <StaticQuery
        query={graphql`
          query {
            allFile(filter:{relativePath:{glob:"content/pages/affiliates/*.md"}}) {
              nodes{
                relativePath,
                childMarkdownRemark{
                  frontmatter {
                    about_content {
                      about_page_title
                      about_page_content
                    }
                  }
                }
              }
            }
          }
        `}
        render={({ allFile }) => {
          const content = allFile.nodes.filter(node => node.relativePath === `content/pages/affiliates/affiliates-${lang}.md`).shift()
          if (!content || !content.childMarkdownRemark) throw new Error(`No affiliates translations found for language ${lang}`)
          return render(content.childMarkdownRemark.frontmatter.about_content)
        }}
      />
    )}
  </Language.Consumer>
)
Example #15
Source File: Image.js    From cardano-documentation with MIT License 6 votes vote down vote up 
Image = (props) => {
  return (
    <StaticQuery
      query={graphql`
        query {
          images: allFile(
            filter: { extension: { regex: "/jpeg|jpg|png|gif/" } }
          ) {
            edges {
              node {
                extension
                relativePath
                childImageSharp {
                  fluid(maxWidth: 1000) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      `}
      render={({ images }) =>
        renderImage(
          images.edges.find((image) => image.node.relativePath === props.src),
        )
      }
    />
  )
}
Example #16
Source File: blog.js    From web with MIT License 6 votes vote down vote up 
function renderBlogPage() {
  return (
    <StaticQuery
      query={graphql`
        query BlogList {
          articulos: allMdx {
            edges {
              node {
                id
                slug
                frontmatter {
                  title
                  description
                }
              }
            }
          }
        }
      `}
      render={(data) => {
        const articulosFormateados = data.articulos.edges.map((articulo) => {
          return {
            ...articulo.node.frontmatter,
            slug: articulo.node.slug,
            id: articulo.node.id,
          };
        });
        return BlogPage(articulosFormateados);
      }}
    />
  );
}
Example #17
Source File: HeaderStatic.js    From gatsby-tutorial-2020 with MIT License 6 votes vote down vote up 
ComponentName = () => (
  <StaticQuery
    query={graphql`
      {
        site {
          info: siteMetadata {
            person {
              age
              name
            }
            author
            data
            description
            title
          }
        }
      }
    `}
    render={data => <h4>{data.site.info.description}</h4>}
  ></StaticQuery>
)
Example #18
Source File: Announcement.js    From tbtc-website with MIT License 6 votes vote down vote up 
Announcement = ({ locale = "en" }) => (
  <StaticQuery
    query={query}
    render={data => {
      const match = data.allMarkdownRemark.edges
        .find(e => e.node.fields.locale === locale)
      const { html: body } = match.node
      if (!body) {
        return null
      }
      return <AnnouncementTemplate body={body} />
    }}
  />
)
Example #19
Source File: layout.js    From wp-graphql-gatsby-starter with MIT License 6 votes vote down vote up 
Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
            description
          }
        }
      }
    `}
    render={data => (
      <ThemeContext.Consumer>
        {theme => (
          <div className={theme.dark ? "dark" : "light"}>
            <Header
              siteTitle={data.site.siteMetadata.title}
              siteDescription={data.site.siteMetadata.description}
            />
            <div className="container">{children}</div>
            <Footer />
          </div>
        )}
      </ThemeContext.Consumer>
    )}
  />
)
Example #20
Source File: mainContext.js    From jamstack-ecommerce with MIT License 6 votes vote down vote up 
render() {
    let state = initialState
    if (typeof window !== 'undefined') {
      const storageState = window.localStorage.getItem(STORAGE_KEY)
      if (storageState) {
        state = JSON.parse(storageState)
      }
    }

    return (
      <StaticQuery query={mainQuery}>
        { queryData => {
          return (
            <SiteContext.Provider value={{
              ...state,
               navItems: queryData,
               addToCart: this.addToCart,
               clearCart: this.clearCart,
               removeFromCart: this.removeFromCart,
               setItemQuantity: this.setItemQuantity
            }}>
             {this.props.children}
           </SiteContext.Provider>
          )
        }}
        </StaticQuery>
    )
  }
Example #21
Source File: layout.js    From rg-portfolio with MIT License 6 votes vote down vote up 
Layout = ({ children, header }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        contentfulSiteInformation {
          siteName
          siteDescription
          logo {
            file {
              url
            }
          }
          menus
        }
      }
    `}
    
    render={data => (
      <>
        <Header
          data={data.contentfulSiteInformation}
          siteTitle={data.contentfulSiteInformation.siteName}
          header={header}
        />
        <div>
          <main id="home">{children}</main>
        </div>
        <Footer siteName={data.contentfulSiteInformation.siteName} />
      </>
    )}
  />
)
Example #22
Source File: image.js    From yi-note with GNU General Public License v3.0 6 votes vote down vote up 
Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
Example #23
Source File: index.js    From strapi-legacy-gatsby-blog with MIT License 6 votes vote down vote up 
IndexPage = () => (
  <Layout>
    <StaticQuery
      query={graphql`
        query {
          allStrapiArticle {
            edges {
              node {
                strapiId
                title
                category {
                  name
                }
                image {
                  publicURL
                }
              }
            }
          }
        }
      `}
      render={data => (
        <div className="uk-section">
          <div className="uk-container uk-container-large">
            <h1>Strapi blog</h1>
            <ArticlesComponent articles={data.allStrapiArticle.edges} />
          </div>
        </div>
      )}
    />
  </Layout>
)
Example #24
Source File: layout.js    From strapi-starter-gatsby-blog with MIT License 6 votes vote down vote up 
Layout = ({ children, seo }) => (
  <StaticQuery
    query={graphql`
      query {
        strapiHomepage {
          seo {
            metaTitle
            metaDescription
            shareImage {
              localFile {
                publicURL
              }
            }
          }
        }
      }
    `}
    render={(data) => (
      <>
        <Seo seo={seo} />
        <Nav />
        <main>{children}</main>
      </>
    )}
  />
)
Example #25
Source File: Subscribe.js    From gatsby-theme-try-ghost with MIT License 6 votes vote down vote up 
SubscribeQuery = props => (
    <StaticQuery
        query={graphql`
            query GhostSettingsForSubscribe {
                ghostSettings {
                    url
                    title
                }
            }
        `}
        render={data => <Subscribe data={data} {...props} />}
    />
)
Example #26
Source File: Image.jsx    From gatsby-startbootstrap-agency with MIT License 6 votes vote down vote up 
Image = ({ fileName, alt, ...restProps }) => (
  <StaticQuery
    query={graphql`
      query BaseImageQuery {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                gatsbyImageData(layout: FULL_WIDTH)
              }
            }
          }
        }
      }
    `}
    render={({ images }) => {
      const image = images.edges.find((n) => n.node.relativePath.includes(fileName));

      if (!image) {
        return null;
      }

      const imageData = image.node.childImageSharp.gatsbyImageData;
      return <GatsbyImage alt={alt} image={imageData} {...restProps} />;
    }}
  />
)
Example #27
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',
        },
      ],
    },
  }))
})
Example #28
Source File: nav.js    From tmc-wiki with MIT License 5 votes vote down vote up 
Nav = ({ post }) => (
  <nav className="navbar navbar-expand-lg">
    <a className="navbar-brand" href="/"><h5 className="brand-name display-4 animate__animated animate__flipInX"></h5></a>
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>

    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav mr-auto">
        <li className="nav-item active">
          <a className="nav-link" href="/posts">Posts<span className="sr-only">(current)</span></a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="https://github.com/Jackbaude/tmc-wiki" target="_blank"rel="noreferrer noopener"><FontAwesomeIcon icon={faGithub}/> Github</a>
        </li>
        <li className="nav-item dropdown">
          <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            More
          </a>
          <div className="dropdown-menu" aria-labelledby="navbarDropdown">
            <a className="dropdown-item" href="https://discord.gg/FcTFg2E" target="_blank"rel="noreferrer noopener"><FontAwesomeIcon icon={faDiscord}/> Discord</a>
            <div className="dropdown-divider"></div>
            <a className="dropdown-item" href="https://www.youtube.com/channel/UCf9SYal_h3WSoksvxLYruuQ"target="_blank"rel="noreferrer noopener"> <FontAwesomeIcon icon={faYoutube}/> Youtube</a>


          </div>
        </li>
      </ul>
      <StaticQuery
    query={graphql`
        query SearchIndexQuery {
          siteSearchIndex {
            index
          }
        }
      `}
    render={data => (
      <Search searchIndex={data.siteSearchIndex.index}/>
    )}
  />
    </div>
  </nav>
)
Example #29
Source File: index.jsx    From L-J-gatsby-blog-starter with MIT License 5 votes vote down vote up 
export function Head({ description, lang, meta, keywords, title }) {
  return (
    <StaticQuery
      query={detailsQuery}
      render={data => {
        const metaDescription =
          description || data.site.siteMetadata.description
        return (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            title={title}
            titleTemplate={`%s | ${data.site.siteMetadata.title}`}
            meta={[
              {
                name: `description`,
                content: metaDescription,
              },
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:description`,
                content: metaDescription,
              },
              {
                property: `og:type`,
                content: `website`,
              },
            ]
              .concat(
                keywords.length > 0
                  ? {
                      name: `keywords`,
                      content: keywords.join(`, `),
                    }
                  : []
              )
              .concat(meta)}
          >
            <meta
              name="google-site-verification"
              content={data.site.siteMetadata.gsc}
            />
          </Helmet>
        )
      }}
    />
  )
}