title: How can I pass a URL querystring variable dynamically to a composed graphql query in react?
body: <p>I am attempting to build a component using date from a graphql query but cannot see how dynamically supply a variable if it is not available in props when my component is created. eg. I have:-</p>
  
  <pre><code>class UsageComponent extends Component {
      render() {
          const params = this.queryStringParse(window.location.href);
          const queryStringImageId = params.id;
  
          const imageDetailsResults = this.props.getImageDetails.imageByImageId
  
          (etc...)
      }
  }
  
  
  
  const GET_IMAGE_DETAILS_QUERY = gql`
      query getImageDetails($imageId: Int!){
          imageByImageId(imageId:$imageId) {
              filename
              originalFilename
              width
              height
              description
              (etc...)
          }
      }
  `;
  
  
  export default compose(
          graphql(GET_IMAGE_DETAILS_QUERY, {name: "getImageDetails", options: props =&gt; { return { variables: { imageId: 123456 }}; }}),
          graphql(GET_PUBLICATIONS_QUERY, {name: "getPublications"})
  )(ImageBrowser);
  </code></pre>
  
  <p>Which works fine. i.e. imageDetailsResults is populated and I can use the data subsequently in the render function.</p>
  
  <p>However I would like to be able to replace that hard set "imageId: 123456" in the composed graphql with the queryStringImageId value I get in the component render.</p>
  
  <p>I don't think I am able to set this a props value as I'm coming to this component page from a redirected url:-</p>
  
  <pre><code>&lt;Switch&gt;
      &lt;AuthRoute path="/image" component={ImageBrowser} token={token} /&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>Any suggestions would be much appreciated!</p>