Gatsby - Reusable Static Query Example

gistfile1.txt

import React from 'react';
import PropTypes from 'prop-types';
import { graphql, StaticQuery } from 'gatsby';

function TestimonialQuery({ children, identifier }) {
  return (
    <StaticQuery
      query={graphql`
        query {
          allContentfulTestimonial {
            edges {
              node {
                identifier
                image {
                  title
                  fluid(maxWidth: 437) {
                    ...GatsbyContentfulFluid_withWebp
                  }
                }  
              }
            }
          }
        }
      `}
      render={({ allContentfulTestimonial }) =>
        children(
          allContentfulTestimonial.edges.find(
            ({ node }) => node.identifier === identifier,
          ),
        )
      }
    />
  );
}

TestimonialQuery.propTypes = {
  children: PropTypes.func.isRequired,
  identifier: PropTypes.string.isRequired,
};

export default React.memo(TestimonialQuery);

Smart trick. But why is it not mentioned in the official Gatsby document?

Whoa, I forgot about this one. There is a downside to this but I can't remember what it is. I think it ends up adding all of the allContentfulTestimonial items into the browser but for my use case, it wasn't a big deal.

Better to use hooks. Hooks are reusable.

Yeah, this was created before hooks existed.