Function input queries can be customized on each [function owner](/docs/apps/build/functions/input-output/metafields-for-input-queries#how-it-works) using input query variables. This is helpful when using fields with arguments like [`inAnyCollection`](/docs/api/functions/reference/order-discounts/graphql/common-objects/product).
For example, consider the following input query:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="without-input-query-variables.graphql"></script>
<script type="text/plain" data-language="graphql">
RAW_MD_CONTENTquery Input {
cart {
lines {
id
merchandise {
... on ProductVariant {
id
product {
inExcludedCollection: inAnyCollection(ids: ["gid://shopify/Collection/1", "gid://shopify/Collection/2", "gid://shopify/Collection/3"])
inVIPCollection: inAnyCollection(ids: ["gid://shopify/Collection/4", "gid://shopify/Collection/5"])
}
}
}
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
This input query will only work on the shop where those collections are defined, limiting the function to single shop. Additionally, there's no way to update these collections without deploying a new version of the function with an updated input query, or to vary them when your function is used multiple times in a shop.
This guide will explain how to use input query variables to make these arguments configurable.
## Requirements
- You're using Shopify CLI version `3.34.0` or higher.
- You're familiar with [metafields](/docs/apps/build/custom-data/metafields) concepts and APIs.
- You're familiar with the use of [metafields to configure functions](/docs/apps/build/functions/input-output/metafields-for-input-queries)
## Step 1: Specify variables for your query
Replace field argument values with a variable with a matching type. In the case of the `ids` argument of `inAnyCollection`, the type is `[ID!]`.
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="with-input-query-variables.graphql"></script>
<script type="text/plain" data-language="graphql">
RAW_MD_CONTENTquery Input($excludedCollectionIds: [ID!], $vipCollectionIds: [ID!]) {
cart {
lines {
id
merchandise {
... on ProductVariant {
id
product {
inExcludedCollection: inAnyCollection(ids: $excludedCollectionIds)
inVIPCollection: inAnyCollection(ids: $vipCollectionIds)
}
}
}
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
## Step 2: Specify values for variables
Input query variables are populated by reading a [JSON metafield](/docs/apps/build/custom-data/metafields/list-of-data-types) on the [function owner](/docs/apps/build/functions/input-output/metafields-for-input-queries#how-it-works). The structure of the metafield value must be such that each top level key corresponds to a variable name, and each value matches that variables type. To satisfy the query above, we need to set a metafield value like this:
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"excludedCollectionIds": [
"gid://shopify/Collection/1",
"gid://shopify/Collection/2",
"gid://shopify/Collection/3"
],
"vipCollectionIds": [
"gid://shopify/Collection/4",
"gid://shopify/Collection/5"
]
}
END_RAW_MD_CONTENT</script>
</div>
</p>
> Tip:
> For any variables which do not appear as top level keys in the metafield, a value of `null` will be used. Similarly, if the metafield is not set, all variables will use a value of `null`. If a variable is declared as required using the `!` suffix, and a value of `null` is passed, function execution will fail.
The metafield will be read from the [function owner](/docs/apps/build/functions/input-output/metafields-for-input-queries#how-it-works) at runtime to populate the values for these variables. You can set this metafield using the same techniques as you would for [configuration you would access in the function](/docs/apps/build/functions/input-output/metafields-for-input-queries#how-it-works). To illustrate our example, we'll use the [`metafieldsSet`](/docs/api/admin-graphql/latest/mutations/metafieldsSet) mutation:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="set-metafield.graphql"></script>
<script type="text/plain" data-language="graphql">
RAW_MD_CONTENTmutation SetMetafield {
metafieldsSet(metafields: [
{
namespace: "$app:my-namespace",
key: "my-key",
ownerId: "OWNER_ID",
type: "json",
value: "{\"excludedCollectionIds\"=>[\"gid://shopify/Collection/1\", \"gid://shopify/Collection/2\", \"gid://shopify/Collection/3\"], \"vipCollectionIds\"=>[\"gid://shopify/Collection/4\", \"gid://shopify/Collection/5\"]}{\"selectedCollectionIds\":[\"gid://shopify/Collection/1\",\"gid://shopify/Collection/2\",\"gid://shopify/Collection/3\"]}"
}
]) {
metafields {
id
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
> Caution:
> Ensure you set metafields on the function owner. For example, Discount API variables would be set on the [discount](https://shopify.dev/docs/api/admin-graphql/2024-07/enums/MetafieldOwnerType#value-discount), Checkout Validation API variables would be set on the [validation](https://shopify.dev/docs/api/admin-graphql/2024-07/enums/MetafieldOwnerType#value-validation), Cart Transform API variables would be set on the [cart transform](https://shopify.dev/docs/api/admin-graphql/2024-07/enums/MetafieldOwnerType#value-carttransform), and so on. Input query variables do not utilize metafields on the shop or app installation.
<!-- -->
> Tip:
> You should use a [reserved prefix](/docs/apps/build/custom-data/ownership#reserved-prefixes) in your metafield namespace so that other apps can't use your metafields.
## Step 3: Specify which metafield to use for input queries
To specify which metafield contains the input query variables, you need to set the values in the `extensions.input.variables` section of the function's [configuration file](/docs/api/functions/configuration):
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
RAW_MD_CONTENT[extensions.input.variables]
namespace = "$app:my-namespace"
key = "my-key"
END_RAW_MD_CONTENT</script>
</div>
</p>
If you're using [a previous version of the configuration file](/docs/api/functions/configuration#properties-for-earlier-versions) that doesn't have an `[[extensions]]` section, then the configuration section for input query variables is called `[input.variables]`.
Once this configuration has been deployed, your function will start loading that metafield at runtime to populate your input query variables.
## Limitations
- Only JSON type metafields are supported.
- Metafields above the size [limit](/docs/apps/build/functions/input-output#limitations) won't be returned. The function should use separate metafields in these cases.
- Input query variables will return errors for any [GraphQL list](https://graphql.org/learn/schema/#lists-and-non-null) variable with a value that exceeds 100 elements.
## Next steps
- Learn about the [language support](/docs/apps/build/functions/programming-languages) available in Shopify Functions.
- Consult the [API references for Shopify Functions](/docs/api/functions).