Support for Configurable Option Selections in Storefront app

Nobody has claimed this yet.

As a Magento Developer, 

I want to optimize the GraphQL product data retrieval for configurable products with a large number of variants

So that merchants can provide consistent user experience to their customers irrespective of the size and complexity of their catalog. 

**Acceptance Criteria**

GraphQL calls for configurable products scales as well as the calls for non-configurable products.
Clients are not required to pre-fetch variant data for a configurable product to render the page. 

**Approved GraphQL Schema**

**Example**

```
Product configuration

Size
S ID 1
M ID 2

Color
Red ID 3
Green ID 4
Blue ID 5

Variations
S-Red 1-3
S-Green 1-4
M-Red 2-3
M-Green 2-4
M-Blue 2-5 {code}
**All options**

{code}
{
products(filter: {sku: {eq: "configurable-sku"}}) {
items {
... on ConfigurableProduct {
configurable*options_selection*metadata {
options*available_for*selection {
attribute_code
available*value*ids
}
}
}
}
}
}

{
"products": {
"items": {
"configurable*options_selection*metadata": {
"options*available_for*selection": [
{
"attribute_code": "size",
"available*value*ids": [1, 2] // S, M
},
{
"attribute_code": "color",
"available*value*ids": [3, 4, 5] //R, G, B
}
]
}
}
}
{code}
 

**Options filtered by selected size**

{code}
{
products(filter: {sku: {eq: "configurable-sku"}}) {
items {
... on ConfigurableProduct {
configurable*options_selection*metadata {
options*available_for*selection(selectedConfigurableOptionValues: [1]) { // S
attribute_code
available*value*ids
}
}
}
}
}
}

{
"products": {
"items": {
"configurable*options_selection*metadata": {
"options*available_for*selection": [
{
"attribute_code": "size",
"available*value*ids": [1, 2] // S, M
},
{
"attribute_code": "color",
"available*value*ids": [3, 4] // R,G // Green available only in M
}
]
}
}
}
{code}

**Options filtered by selected color**

{code}
{
products(filter: {sku: {eq: "configurable-sku"}}) {
items {
... on ConfigurableProduct {
configurable*options_selection*metadata {
options*available_for*selection(selectedConfigurableOptionValues: [5]) { // B
attribute_code
available*value*ids
}
}
}
}
}
}

{
"products": {
"items": {
"configurable*options_selection*metadata": {
"options*available_for*selection": [
{
"attribute_code": "size",
"available*value*ids": [2]
},
{
"attribute_code": "color",
"available*value*ids": [3, 4, 5] // Green available only in M
}
]
}
}
}
{code}

**Options filtered by selected color and size**

{code}
{
products(filter: {sku: {eq: "configurable-sku"}}) {
items {
... on ConfigurableProduct {
configurable*options_selection*metadata {
options*available_for*selection(selectedConfigurableOptionValues: [2, 5]) {
attribute_code
available*value*ids
}
}
}
}
}
}

{
"products": {
"items": {
"configurable*options_selection*metadata": {
"options*available_for*selection": [
{
"attribute_code": "size",
"available*value*ids": [2]
},
{
"attribute_code": "color",
"available*value*ids": [3, 4, 5] // Green available only in M
}
]
}
}
}
{code}

{code}
{
products(filter: {sku: {eq: "configurable-sku"}}) {
items {
... on ConfigurableProduct {
configurable*options_selection*metadata {
options*available_for*selection(selectedConfigurableOptionValues: [2, 4]) {
attribute_code
available*value*ids
}
}
}
}
}
}

{
"products": {
"items": {
"configurable*options_selection*metadata": {
"options*available_for*selection": [
{
"attribute_code": "size",
"available*value*ids": [1, 2]
},
{
"attribute_code": "color",
"available*value*ids": [3, 4, 5] // Green available only in M
}
>
}
}
}
```

Start with the approved GraphQL schema and design documents linked in the issue, then trace the existing configurable-product GraphQL handling in the storefront app. Done means configurable-product calls scale like non-configurable calls and clients can render pages without pre-fetching variant data.

Written by the indexing model from the issue text.