In Sitecore JSS you have two out of the box variables available in GraphQL: $contextItem and $datasource. In my current JSS project, which is an API-only solution, I added more variables. This simplified my queries and gave me a better understanding on how Sitecore implements GraphQL. Curious yet? Read along! I will demonstrate how to add a variable.

Steps

1. Decompile this dll:

Sitecore.JavaScriptServices.GraphQL.dll

and find this resolver:

 Sitecore.JavaScriptServices.GraphQL.LayoutService.GraphQLAwareRenderingContentsResolver

Copy and paste the contents of ths resolver to a file in your solution.

2. It's a lot of code, but focus on these lines:

  LocalGraphQLRequest request1 = new LocalGraphQLRequest();
  request1.Query = str;
  LocalGraphQLRequest request = request1;

  request.LocalVariables.Add("contextItem",
    global::Sitecore.Context.Item.ID.Guid.ToString());

  request.LocalVariables.Add("datasource", rendering.DataSource);

Here you can add a variable by adding this line:

  request.LocalVariables.Add("productId",
    HttpContext.Current.Request.QueryString["productId"] ?? string.Empty);

Now besides the variables $contextItem and $datasource, the variable $productId also is available. The new variable contains the value of the productId querystring parameter in the url.

3. Next step, patch the config, for example like this:

<configuration
  xmlns:patch="http://www.sitecore.net/xmlconfig/"
  xmlns:set="http://www.sitecore.net/xmlconfig/set/">
  <sitecore>
    <layoutService>
      <configurations>
        <config name="jss">
          <rendering>
            <renderingContentsResolver
              patch:instead="*[@type='Sitecore.JavaScriptServices.GraphQL.LayoutService.GraphQLAwareRenderingContentsResolver, Sitecore.JavaScriptServices.GraphQL']"
              type="//Insert location of your custom code here, //Insert name of dll here"
              resolve="true">
              <IncludeServerUrlInMediaUrls>true</IncludeServerUrlInMediaUrls>
            </renderingContentsResolver>
          </rendering>
        </config>
      </configurations>
    </layoutService>
  </sitecore>
</configuration>

The above example alters the config of existing "jss" configuration. You can also add your own configuration. If you add a configuration with for example 'custom' as name. You can access it with the following url:

mydemosite.local/sitecore/api/layout/render/custom?...

4. That's it! Now you can use the custom $productId variable in GraphQL Queries within Sitecore JSS. You can you use it to query Sitecore or even the SOLR-index directly, like the example below:

query ProductQuery($productId: String!) {
  search(fieldsEqual: [{ name: "_productid_s", value: $productId }]) {
    results {
      title: field(name: "title_s")
      description: field(name: "description_s")
    }
  }
}

Keep in mind I only used and tested this in Integrated / API only mode. Happy coding!