Choose a version:

flattenConnection
utility

The flattenConnection utility transforms a connection object from the Storefront API (for example, Product-related connections) 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.

Anchor to parametersParameters

Anchor to connection connection |

ConnectionGenericForDoc

connection
```
ConnectionEdges | ConnectionNodes
```

export interface ConnectionGenericForDoc {
  connection?: ConnectionEdges | ConnectionNodes;
}

ConnectionEdges

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

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

ConnectionNodes

nodes
```
Array<unknown>
```

{
  nodes: Array<unknown>;
}

Was this section helpful?

Anchor to returnsReturns

Anchor to __@iterator@450 __@iterator@450 () => IterableIterator<unknown> required: Iterator
Anchor to __@unscopables@452 __@unscopables@452 { [x: number]: boolean; length?: boolean; ?: boolean; ?: boolean; pop?: boolean; push?: boolean; concat?: boolean; join?: boolean; reverse?: boolean; shift?: boolean; slice?: boolean; sort?: boolean; splice?: boolean; unshift?: boolean; indexOf?: boolean; lastIndexOf?: boolean; every?: boolean; some?: boolean; forEach?: boolean; map?: boolean; filter?: boolean; reduce?: boolean; reduceRight?: boolean; find?: boolean; findIndex?: boolean; fill?: boolean; copyWithin?: boolean; entries?: boolean; keys?: boolean; values?: boolean; includes?: boolean; flatMap?: boolean; flat?: boolean; [Symbol.iterator]?: boolean; readonly [Symbol.unscopables]?: boolean; at?: boolean; } required: Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement.
Anchor to at at (index: number) => unknown required: 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.
Anchor to concat concat { (...items: ConcatArray<unknown>[]): unknown[]; (...items: unknown[]): unknown[]; } required: Combines two or more arrays. This method returns a new array without modifying any existing arrays.
Anchor to copyWithin copyWithin (target: number, start: number, end?: number) => required: Returns the this object after copying a section of the array identified by start and end to the same array starting at position target
Anchor to entries entries () => IterableIterator<[number, unknown]> required: Returns an iterable of key, value pairs for every entry in the array
Anchor to every every { <S extends unknown>(predicate: (value: unknown, index: number, array: unknown[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: unknown, index: number, array: required: Determines whether all the members of an array satisfy the specified test.
Anchor to fill fill (value: unknown, start?: number, end?: number) => required: Changes all array elements from start to end index to a static value and returns the modified array
Anchor to filter filter { <S extends unknown>(predicate: (value: unknown, index: number, array: unknown[]) => value is S, thisArg?: any): S[]; (predicate: (value: unknown, index: number, array: unknown[]) => unknown, required: Returns the elements of an array that meet the condition specified in a callback function.
Anchor to find find { <S extends unknown>(predicate: (value: unknown, index: number, obj: unknown[]) => value is S, thisArg?: any): S; (predicate: (value: unknown, index: number, obj: unknown[]) => unknown, required: Returns the value of the first element in the array where predicate is true, and undefined otherwise.
Anchor to findIndex findIndex (predicate: (value: unknown, index: number, obj: unknown[]) => unknown, thisArg?: any) => number required: Returns the index of the first element in the array where predicate is true, and -1 otherwise.
Anchor to flat flat <A, D extends number = 1>(this: A, depth?: D) => FlatArray<A, D>[] required: Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.
Anchor to flatMap flatMap <U, This = undefined>(callback: (this: This, value: unknown, index: number, array: unknown[]) => U | readonly U[], thisArg?: This) => U[] required: 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.
Anchor to forEach forEach (callbackfn: (value: unknown, index: number, array: unknown[]) => void, thisArg?: any) => void required: Performs the specified action for each element in an array.
Anchor to includes includes (searchElement: unknown, fromIndex?: number) => boolean required: Determines whether an array includes a certain element, returning true or false as appropriate.
Anchor to indexOf indexOf (searchElement: unknown, fromIndex?: number) => number required: Returns the index of the first occurrence of a value in an array, or -1 if it is not present.
Anchor to join join (separator?: string) => string required: Adds all the elements of an array into a string, separated by the specified separator string.
Anchor to keys keys () => IterableIterator<number> required: Returns an iterable of keys in the array
Anchor to lastIndexOf lastIndexOf (searchElement: unknown, fromIndex?: number) => number required: Returns the index of the last occurrence of a specified value in an array, or -1 if it is not present.
Anchor to length length number required: Gets or sets the length of the array. This is a number one higher than the highest index in the array.
Anchor to map map <U>(callbackfn: (value: unknown, index: number, array: unknown[]) => U, thisArg?: any) => U[] required: Calls a defined callback function on each element of an array, and returns an array that contains the results.
Anchor to pop pop () => unknown required: Removes the last element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
Anchor to push push (...items: unknown[]) => number required: Appends new elements to the end of an array, and returns the new length of the array.
Anchor to reduce reduce { (callbackfn: (previousValue: unknown, currentValue: unknown, currentIndex: number, array: unknown[]) => unknown): unknown; (callbackfn: (previousValue: unknown, currentValue: unknown, currentIndex: number, array: unknown[]) => unknown, initialValue: unknown): unknown; < required: 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.
Anchor to reduceRight reduceRight { (callbackfn: (previousValue: unknown, currentValue: unknown, currentIndex: number, array: unknown[]) => unknown): unknown; (callbackfn: (previousValue: unknown, currentValue: unknown, currentIndex: number, array: unknown[]) => unknown, initialValue: unknown): unknown; < required: 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.
Anchor to reverse reverse () => unknown[] required: Reverses the elements in an array in place. This method mutates the array and returns a reference to the same array.
Anchor to shift shift () => unknown required: Removes the first element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
Anchor to slice slice (start?: number, end?: number) => unknown[] required: 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.
Anchor to some some (predicate: (value: unknown, index: number, array: unknown[]) => unknown, thisArg?: any) => boolean required: Determines whether the specified callback function returns true for any element of an array.
Anchor to sort sort (compareFn?: (a: unknown, b: unknown) => number) => required: Sorts an array in place. This method mutates the array and returns a reference to the same array.
Anchor to splice splice { (start: number, deleteCount?: number): unknown[]; (start: number, deleteCount: number, ...items: unknown[]): unknown[]; } required: Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
Anchor to toLocaleString toLocaleString { (): string; (locales: string | string[], options?: NumberFormatOptions & DateTimeFormatOptions): string; } required: Returns a string representation of an array. The elements are converted to string using their toLocaleString methods.
Anchor to toString toString () => string required: Returns a string representation of an array.
Anchor to unshift unshift (...items: unknown[]) => number required: Inserts new elements at the start of an array, and returns the new length of the array.
Anchor to values values () => IterableIterator<unknown> required: Returns an iterable of values in the array

FlattenConnectionReturnForDoc

__@iterator@450
Iterator
```
() => IterableIterator<unknown>
```

__@unscopables@452

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

{ [x: number]: boolean; length?: boolean; toString?: boolean; toLocaleString?: boolean; pop?: boolean; push?: boolean; concat?: boolean; join?: boolean; reverse?: boolean; shift?: boolean; slice?: boolean; sort?: boolean; splice?: boolean; unshift?: boolean; indexOf?: boolean; lastIndexOf?: boolean; every?: boolean; some?: boolean; forEach?: boolean; map?: boolean; filter?: boolean; reduce?: boolean; reduceRight?: boolean; find?: boolean; findIndex?: boolean; fill?: boolean; copyWithin?: boolean; entries?: boolean; keys?: boolean; values?: boolean; includes?: boolean; flatMap?: boolean; flat?: boolean; [Symbol.iterator]?: boolean; readonly [Symbol.unscopables]?: boolean; at?: boolean; }

at
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.
```
(index: number) => unknown
```
concat
Combines two or more arrays. This method returns a new array without modifying any existing arrays.
```
{ (...items: ConcatArray<unknown>[]): unknown[]; (...items: unknown[]): unknown[]; }
```
copyWithin
Returns the this object after copying a section of the array identified by start and end to the same array starting at position target
```
(target: number, start: number, end?: number) => FlattenConnectionReturnForDoc
```
entries
Returns an iterable of key, value pairs for every entry in the array
```
() => IterableIterator<[number, unknown]>
```

every

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

{ <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; }

fill
Changes all array elements from `start` to `end` index to a static `value` and returns the modified array
```
(value: unknown, start?: number, end?: number) => FlattenConnectionReturnForDoc
```

filter

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

{ <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[]; }

find

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

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

findIndex
Returns the index of the first element in the array where predicate is true, and -1 otherwise.
```
(predicate: (value: unknown, index: number, obj: unknown[]) => unknown, thisArg?: any) => number
```
flat
Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.
```
<A, D extends number = 1>(this: A, depth?: D) => FlatArray<A, D>[]
```
flatMap
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.
```
<U, This = undefined>(callback: (this: This, value: unknown, index: number, array: unknown[]) => U | readonly U[], thisArg?: This) => U[]
```

forEach

Performs the specified action for each element in an array.

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

includes
Determines whether an array includes a certain element, returning true or false as appropriate.
```
(searchElement: unknown, fromIndex?: number) => boolean
```
indexOf
Returns the index of the first occurrence of a value in an array, or -1 if it is not present.
```
(searchElement: unknown, fromIndex?: number) => number
```
join
Adds all the elements of an array into a string, separated by the specified separator string.
```
(separator?: string) => string
```
keys
Returns an iterable of keys in the array
```
() => IterableIterator<number>
```
lastIndexOf
Returns the index of the last occurrence of a specified value in an array, or -1 if it is not present.
```
(searchElement: unknown, fromIndex?: number) => number
```
length
Gets or sets the length of the array. This is a number one higher than the highest index in the array.
```
number
```
map
Calls a defined callback function on each element of an array, and returns an array that contains the results.
```
<U>(callbackfn: (value: unknown, index: number, array: unknown[]) => U, thisArg?: any) => U[]
```
pop
Removes the last element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
```
() => unknown
```
push
Appends new elements to the end of an array, and returns the new length of the array.
```
(...items: unknown[]) => number
```

reduce

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.

{ (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; }

reduceRight

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.

{ (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; }

reverse
Reverses the elements in an array in place. This method mutates the array and returns a reference to the same array.
```
() => unknown[]
```
shift
Removes the first element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
```
() => unknown
```
slice
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.
```
(start?: number, end?: number) => unknown[]
```

some

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

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

sort
Sorts an array in place. This method mutates the array and returns a reference to the same array.
```
(compareFn?: (a: unknown, b: unknown) => number) => FlattenConnectionReturnForDoc
```
splice
Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
```
{ (start: number, deleteCount?: number): unknown[]; (start: number, deleteCount: number, ...items: unknown[]): unknown[]; }
```
toLocaleString
Returns a string representation of an array. The elements are converted to string using their toLocaleString methods.
```
{ (): string; (locales: string | string[], options?: NumberFormatOptions & DateTimeFormatOptions): string; }
```
toString
Returns a string representation of an array.
```
() => string
```
unshift
Inserts new elements at the start of an array, and returns the new length of the array.
```
(...items: unknown[]) => number
```
values
Returns an iterable of values in the array
```
() => IterableIterator<unknown>
```

Array<unknown>

Was this section helpful?

Example code

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>

);

}

examples

Example code

description

I am the default example

JavaScript

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

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

flattenConnectionutility

Anchor to parametersParameters

ConnectionGenericForDoc

ConnectionEdges

ConnectionNodes

Anchor to returnsReturns

FlattenConnectionReturnForDoc

examples

Example code

description

JavaScript

TypeScript

flattenConnection
utility