flatten
utility
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 connectionconnection|
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
unknown[]FlattenConnectionReturnForDoc
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> ); }