Recently someone asked in Sitecore Slack (join if you haven't!) how to dynamically create a GraphQL query variable using a value from the Sitecore Context. There's probably a few different ways to do this but here's what came to mind:

// top of the file
import GraphQLData from '../../lib/GraphQLData';
import {  withSitecoreContext } from '@sitecore-jss/sitecore-jss-react';

// export at bottom
const wrappedComponent = withSitecoreContext()(({sitecoreContext}) => {
  const WrappedComponent = GraphQLData(GET_HEADER_SETTINGS_QUERY, { name: 'headerQuery', options: { 
    variables: { settingsId: `/sitecore/content/${sitecoreContext.site.name}/Content/HeaderSettings` } } })(Header);
    return <WrappedComponent />
});

export default wrappedComponent;
const GET_HEADER_SETTINGS_QUERY = gql`
query GetHeaderSettings($settingsId:String)
{
  item(path:$settingsId) {
    ... on HeaderSettingsTemplate {
    	title {
        rendered
      }
      navLinks {
        targetItems {
          url
          ... on ListingPageRoute {
            title {
              rendered
            }
          }
        }
      }
    }
  }
}
`;