--- title: flattenConnection description: " \ 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: 2023-07 api_name: hydrogen-react source_url: html: https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/flattenconnection md: https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/flattenconnection.md --- # flatten​Connectionutility 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 ``` ```ts { nodes: Array; } ``` ## Returns * length number required Gets or sets the length of the array. This is a number one higher than the highest index in the array. * toString () => string required Returns a string representation of an array. * toLocaleString () => string required Returns a string representation of an array. The elements are converted to string using their toLocaleString methods. * 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. * push (...items: unknown\[]) => number required Appends new elements to the end of an array, and returns the new length of the array. * concat { (...items: ConcatArray\\[]): unknown\[]; (...items: unknown\[]): unknown\[]; } required Combines two or more arrays. This method returns a new array without modifying any existing arrays. * join (separator?: string) => string required Adds all the elements of an array into a string, separated by the specified separator string. * reverse () => unknown\[] required Reverses the elements in an array in place. This method mutates the array and returns a reference to the same array. * 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. * 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. * sort (compareFn?: (a: unknown, b: unknown) => number) => FlattenConnectionReturnForDoc required Sorts an array in place. This method mutates the array and returns a reference to the same array. * 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. * unshift (...items: unknown\[]) => number required Inserts new elements at the start of an array, and returns the new length of the array. * 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. * 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. * every { \(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. * 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. * forEach (callbackfn: (value: unknown, index: number, array: unknown\[]) => void, thisArg?: any) => void required Performs the specified action for each element in an array. * map \(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. * filter { \(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. * 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. * 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. * find { \(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. * 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. * fill (value: unknown, start?: number, end?: number) => FlattenConnectionReturnForDoc required Changes all array elements from `start` to `end` index to a static `value` and returns the modified array * copyWithin (target: number, start: number, end?: number) => FlattenConnectionReturnForDoc 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 * entries () => IterableIterator<\[number, unknown]> required Returns an iterable of key, value pairs for every entry in the array * keys () => IterableIterator\ required Returns an iterable of keys in the array * values () => IterableIterator\ required Returns an iterable of values in the array * includes (searchElement: unknown, fromIndex?: number) => boolean required Determines whether an array includes a certain element, returning true or false as appropriate. * flatMap \(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. * flat \(this: A, depth?: D) => FlatArray\\[] required Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth. * \_\_@iterator\@441 () => IterableIterator\ required Iterator * \_\_@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. * 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. ### 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 (
    {products.map((product) => (
  • {product.title}
    • ))}
); } ``` ##### 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 (
    {products.map((product) => (
  • {product.title}
    • ))}
); } ```