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);

Better to use hooks. Hooks are reusable.

Yeah, this was created before hooks existed.