flatten
The 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 connectionconnectionconnectionConnectionEdges | ConnectionNodesConnectionEdges | ConnectionNodes
ConnectionEdges
- edges
Array<{node: unknown}>
ConnectionNodes
- nodes
Array<unknown>
Anchor to returnsReturns
unknown[]unknown[]Examples
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> ); }
Was this page helpful?