Gatsby Query Fragment - Multiple Images Example

queryFragments.js

// Your Component (anywhere in your project)
// 
// Place this fragment at the bottom of your component
// and Gatsby will collect it prior to running any 
// page queries
export const profileImageFragment = graphql`
  fragment ProfileImage on RootQueryType {
    mattProfile: imageSharp(id: {regex: "/matt-profile.png/"}) {
      resolutions(width: 339, height: 339) {
        ...GatsbyImageSharpResolutions
      }
    }
    rachelProfile: imageSharp(id: {regex: "/rachel-profile.png/"}) {
      resolutions(width: 339, height: 339) {
        ...GatsbyImageSharpResolutions
      }
    }
  }
`;


// Your Page in `/pages`
// 
// Use the fragment that you created above in 
// your page query like so:

import React from 'react';
import {WhoWeAre} from 'routes';

export default ({data}) => <WhoWeAre {...data} />;

export const query = graphql`
  query ProfileImageQuery {
    ...ProfileImage
  }
`;