---
title: flattenConnection
description: >-
  The flattenConnection utility transforms a connection object from the
  Storefront API (for example, Product-related connections) into a flat array of
  nodes.
api_version: 2026-04
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/flattenconnection'
  md: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/flattenconnection.md'
api_name: hydrogen
---

# 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}>
  ```

### ConnectionNodes

* nodes

  ```ts
  Array<unknown>
  ```

#### Returns

**`unknown[]`**

Examples

### Examples

* #### Example code

  ##### JavaScript

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

  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';
  import type {ProductConnection} from '@shopify/hydrogen/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>
    );
  }
  ```

***