# flattenConnection


    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.
  
### Example code

```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>
  );
}

```

```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>
  );
}

```



## Parameters


### ConnectionGenericForDoc


### connection

value: `ConnectionEdges | ConnectionNodes`



### ConnectionEdges


### edges

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



### ConnectionNodes


### nodes

value: `Array<unknown>`



## Returns


### FlattenConnectionReturnForDoc


### length

value: `number`

Gets or sets the length of the array. This is a number one higher than the highest index in the array.

### toString

value: `() => string`

Returns a string representation of an array.

### toLocaleString

value: `() => string`

Returns a string representation of an array. The elements are converted to string using their toLocaleString methods.

### pop

value: `() => unknown`

Removes the last element from an array and returns it.
If the array is empty, undefined is returned and the array is not modified.

### push

value: `(...items: unknown[]) => number`

Appends new elements to the end of an array, and returns the new length of the array.

### concat

value: `{ (...items: ConcatArray<unknown>[]): unknown[]; (...items: unknown[]): unknown[]; }`

Combines two or more arrays.
This method returns a new array without modifying any existing arrays.

### join

value: `(separator?: string) => string`

Adds all the elements of an array into a string, separated by the specified separator string.

### reverse

value: `() => unknown[]`

Reverses the elements in an array in place.
This method mutates the array and returns a reference to the same array.

### shift

value: `() => unknown`

Removes the first element from an array and returns it.
If the array is empty, undefined is returned and the array is not modified.

### slice

value: `(start?: number, end?: number) => unknown[]`

Returns a copy of a section of an array.
For both start and end, a negative index can be used to indicate an offset from the end of the array.
For example, -2 refers to the second to last element of the array.

### sort

value: `(compareFn?: (a: unknown, b: unknown) => number) => FlattenConnectionReturnForDoc`

Sorts an array in place.
This method mutates the array and returns a reference to the same array.

### splice

value: `{ (start: number, deleteCount?: number): unknown[]; (start: number, deleteCount: number, ...items: unknown[]): unknown[]; }`

Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.

### unshift

value: `(...items: unknown[]) => number`

Inserts new elements at the start of an array, and returns the new length of the array.

### indexOf

value: `(searchElement: unknown, fromIndex?: number) => number`

Returns the index of the first occurrence of a value in an array, or -1 if it is not present.

### lastIndexOf

value: `(searchElement: unknown, fromIndex?: number) => number`

Returns the index of the last occurrence of a specified value in an array, or -1 if it is not present.

### every

value: `{ <S extends unknown>(predicate: (value: unknown, index: number, array: unknown[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: unknown, index: number, array: unknown[]) => unknown, thisArg?: any): boolean; }`

Determines whether all the members of an array satisfy the specified test.

### some

value: `(predicate: (value: unknown, index: number, array: unknown[]) => unknown, thisArg?: any) => boolean`

Determines whether the specified callback function returns true for any element of an array.

### forEach

value: `(callbackfn: (value: unknown, index: number, array: unknown[]) => void, thisArg?: any) => void`

Performs the specified action for each element in an array.

### map

value: `<U>(callbackfn: (value: unknown, index: number, array: unknown[]) => U, thisArg?: any) => U[]`

Calls a defined callback function on each element of an array, and returns an array that contains the results.

### filter

value: `{ <S extends unknown>(predicate: (value: unknown, index: number, array: unknown[]) => value is S, thisArg?: any): S[]; (predicate: (value: unknown, index: number, array: unknown[]) => unknown, thisArg?: any): unknown[]; }`

Returns the elements of an array that meet the condition specified in a callback function.

### reduce

value: `{ (callbackfn: (previousValue: unknown, currentValue: unknown, currentIndex: number, array: unknown[]) => unknown): unknown; (callbackfn: (previousValue: unknown, currentValue: unknown, currentIndex: number, array: unknown[]) => unknown, initialValue: unknown): unknown; <U>(callbackfn: (previousValue: U, currentValue: unknown, currentIndex: number, array: unknown[]) => U, initialValue: U): U; }`

Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.

### reduceRight

value: `{ (callbackfn: (previousValue: unknown, currentValue: unknown, currentIndex: number, array: unknown[]) => unknown): unknown; (callbackfn: (previousValue: unknown, currentValue: unknown, currentIndex: number, array: unknown[]) => unknown, initialValue: unknown): unknown; <U>(callbackfn: (previousValue: U, currentValue: unknown, currentIndex: number, array: unknown[]) => U, initialValue: U): U; }`

Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.

### find

value: `{ <S extends unknown>(predicate: (this: void, value: unknown, index: number, obj: unknown[]) => value is S, thisArg?: any): S; (predicate: (value: unknown, index: number, obj: unknown[]) => unknown, thisArg?: any): unknown; }`

Returns the value of the first element in the array where predicate is true, and undefined
otherwise.

### findIndex

value: `(predicate: (value: unknown, index: number, obj: unknown[]) => unknown, thisArg?: any) => number`

Returns the index of the first element in the array where predicate is true, and -1
otherwise.

### fill

value: `(value: unknown, start?: number, end?: number) => FlattenConnectionReturnForDoc`

Changes all array elements from `start` to `end` index to a static `value` and returns the modified array

### copyWithin

value: `(target: number, start: number, end?: number) => FlattenConnectionReturnForDoc`

Returns the this object after copying a section of the array identified by start and end
to the same array starting at position target

### entries

value: `() => IterableIterator<[number, unknown]>`

Returns an iterable of key, value pairs for every entry in the array

### keys

value: `() => IterableIterator<number>`

Returns an iterable of keys in the array

### values

value: `() => IterableIterator<unknown>`

Returns an iterable of values in the array

### includes

value: `(searchElement: unknown, fromIndex?: number) => boolean`

Determines whether an array includes a certain element, returning true or false as appropriate.

### flatMap

value: `<U, This = undefined>(callback: (this: This, value: unknown, index: number, array: unknown[]) => U | readonly U[], thisArg?: This) => U[]`

Calls a defined callback function on each element of an array. Then, flattens the result into
a new array.
This is identical to a map followed by flat with depth 1.

### flat

value: `<A, D extends number = 1>(this: A, depth?: D) => FlatArray<A, D>[]`

Returns a new array with all sub-array elements concatenated into it recursively up to the
specified depth.

### __@iterator@441

value: `() => IterableIterator<unknown>`

Iterator

### __@unscopables@443

value: `() => { copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: boolean; values: boolean; }`

Returns an object whose properties have the value 'true'
when they will be absent when used in a 'with' statement.

### at

value: `(index: number) => unknown`

Takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.