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 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 toString toString () => string required: Returns a string representation of an array.
Anchor to toLocaleString toLocaleString () => string required: Returns a string representation of an array. The elements are converted to string using their toLocaleString methods.
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 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 join join (separator?: string) => string required: Adds all the elements of an array into a string, separated by the specified separator string.
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 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 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 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 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 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 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 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 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 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 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 find find { <S extends unknown>(predicate: (this: void, value: unknown, index: number, obj: unknown[]) => value is S, thisArg?: any): S; (predicate: (value: unknown, index: number, obj: 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 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 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 keys keys () => IterableIterator<number> required: Returns an iterable of keys in the array
Anchor to values values () => IterableIterator<unknown> required: Returns an iterable of values in the 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 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 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 __@iterator@441 __@iterator@441 () => IterableIterator<unknown> required: Iterator
Anchor to __@unscopables@443 __@unscopables@443 () => { copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: boolean; values: boolean; } required: Returns 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.

FlattenConnectionReturnForDoc

length
Gets or sets the length of the array. This is a number one higher than the highest index in the array.
```
number
```
toString
Returns a string representation of an array.
```
() => string
```
toLocaleString
Returns a string representation of an array. The elements are converted to string using their toLocaleString methods.
```
() => string
```
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
```
concat
Combines two or more arrays. This method returns a new array without modifying any existing arrays.
```
{ (...items: ConcatArray<unknown>[]): unknown[]; (...items: unknown[]): unknown[]; }
```
join
Adds all the elements of an array into a string, separated by the specified separator string.
```
(separator?: string) => string
```
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[]
```
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[]; }
```
unshift
Inserts new elements at the start of an array, and returns the new length of the array.
```
(...items: unknown[]) => number
```
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
```
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
```

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

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

forEach

Performs the specified action for each element in an array.

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

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[]
```

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

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

find

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

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

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
```
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
```
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]>
```
keys
Returns an iterable of keys in the array
```
() => IterableIterator<number>
```
values
Returns an iterable of values in the array
```
() => IterableIterator<unknown>
```
includes
Determines whether an array includes a certain element, returning true or false as appropriate.
```
(searchElement: unknown, fromIndex?: number) => boolean
```
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[]
```
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>[]
```
__@iterator@441
Iterator
```
() => IterableIterator<unknown>
```
__@unscopables@443
Returns an object whose properties have the value 'true' when they will be absent when used in a 'with' statement.
```
() => { copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: boolean; values: 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
```

Array<unknown>

Was this section helpful?

Example code

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>

);

}

examples

Example code

description

I am the default example

JavaScript

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

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

flattenConnectionutility

Anchor to parametersParameters

ConnectionGenericForDoc

ConnectionEdges

ConnectionNodes

Anchor to returnsReturns

FlattenConnectionReturnForDoc

examples

Example code

description

JavaScript

TypeScript

flattenConnection
utility