---
title: getAdjacentAndFirstAvailableVariants
description: >-
  Finds all the variants provided by `adjacentVariants`,
  `options.optionValues.firstAvailableVariant`, and
  `selectedOrFirstAvailableVariant` and return them in a single array. This
  function will remove any duplicated variants found.
api_version: 2025-07
api_name: hydrogen-react
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/utilities/getadjacentandfirstavailablevariants
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/utilities/getadjacentandfirstavailablevariants.md
---

# get​Adjacent​And​First​Available​Variants

Finds all the variants provided by `adjacentVariants`, `options.optionValues.firstAvailableVariant`, and `selectedOrFirstAvailableVariant` and return them in a single array. This function will remove any duplicated variants found.

Examples

### Examples

* #### getAdjacentAndFirstAvailableVariants.js

  ##### Description

  I am the default example

  ##### getAdjacentAndFirstAvailableVariants example

  ```js
  import {getAdjacentAndFirstAvailableVariants} from '@shopify/hydrogen-react';

  // Make sure you are querying for the following fields:
  // - product.options.optionValues.firstSelectableVariant
  // - product.selectedOrFirstAvailableVariant
  // - product.adjacentVariants
  //
  // For any fields that are ProductVariant type, make sure to query for:
  // - variant.selectedOptions.name
  // - variant.selectedOptions.value

  const product = {
    /* Result from querying the SFAPI for a product */
  };

  // Returns a list of unique variants found in product query
  const variants = getAdjacentAndFirstAvailableVariants(product);
  ```

## Related

[- getProductOptions](https://shopify.dev/api/hydrogen-react/utilities/getproductoptions)

[- mapSelectedProductOptionToObject](https://shopify.dev/api/hydrogen-react/utilities/mapselectedproductoptiontoobject)

[- useSelectedOptionInUrlParam](https://shopify.dev/api/hydrogen-react/utilities/useselectedoptioninurlparam)