Choose a version:

flattenConnection

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 |

Anchor to returnsReturns

unknown[]

Examples

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

Was this page helpful?

flattenConnection

Anchor to parametersParameters

ConnectionEdges

ConnectionNodes

Anchor to returnsReturns