---
title: flattenConnection
description: >2-

      The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.

  If `connection` is null or undefined, will return an empty array instead in
  production. In development, an error will be thrown.
    
api_version: 2025-07
api_name: hydrogen-react
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/utilities/flattenconnection
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/utilities/flattenconnection.md
---

# flatten​Connection

The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.

If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.

## Parameters

* connection

  ConnectionEdges | ConnectionNodes

### ConnectionEdges

* edges

  ```ts
  Array<{node: unknown}>
  ```

```ts
{
  edges: Array<{node: unknown}>;
}
```

### ConnectionNodes

* nodes

  ```ts
  Array<unknown>
  ```

```ts
{
  nodes: Array<unknown>;
}
```

## Returns

`unknown[]`

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {flattenConnection} from '@shopify/hydrogen-react';

  export function ProductList({productConnection}) {
    const products = flattenConnection(productConnection);
    return (
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {flattenConnection} from '@shopify/hydrogen-react';
  import type {ProductConnection} from '@shopify/hydrogen-react/storefront-api-types';

  export function ProductList({
    productConnection,
  }: {
    productConnection: ProductConnection;
  }) {
    const products = flattenConnection(productConnection);
    return (
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
    );
  }
  ```