# Fetching Shopify products

https://www.sanity.io/learn/course/sanity-and-shopify-with-hydrogen/fetching-shopify-products.md

With the Hydrogen app connected to Shopify, you will next need to create “routes” to fetch and display products. 

For a more functional Hydrogen app, we’ll need these **three** new route documents.

## Create the “home” route

1. If you get stuck or need more details, see the [React Router documentation on routes](https://reactrouter.com/start/framework/routing).

1. **Create** a home page route with a link to the product index page.

```tsx:web/app/routes/_index.tsx
import {Link} from 'react-router';

export default function Index() {
  return (
    <div className="mx-auto p-12 grid grid-cols-1 gap-4">
      <h1 className="text-3xl font-bold">Home</h1>
      <p>
        <Link className="text-blue-500 underline" to="/collections/all">
          All Products
        </Link>
      </p>
    </div>
  );
}
```

The home page of your Hydrogen App should look much like the image below.

![Home page of a new blank store](https://cdn.sanity.io/images/3do82whm/next/bb399783ddc61d2245cec8f9e87336c7fe555272-2144x1388.png)

You can click the “All Products” link, but it will 404.

## Create the “products” route

This route uses React Router's [loader function convention](https://reactrouter.com/start/data/route-object#loader) to query data on the server and pass it down to the client.

Hydrogen has a preconfigured `storefront` variable which is available to all loaders via the `context` variable. This is explained further in the next exercise.

Using `storefront`, queries to Shopify can be performed. 

1. **Create** a products index route

```tsx:web/app/routes/collections.all.tsx
import {Link, useLoaderData, type LoaderFunctionArgs} from 'react-router';
import {type Product} from '@shopify/hydrogen/storefront-api-types';

export async function loader({
  params,
  context: {storefront},
}: LoaderFunctionArgs) {
  const {products} = await storefront.query<{
    products: {nodes: Product[]};
  }>(
    `#graphql
      query Products {
        products(first: 10) {
          nodes { id title handle }
        }
      }
    `,
  );

  if (!products.nodes.length) {
    throw new Response('Not found', {status: 404});
  }

  return {products: products.nodes};
}

export default function Index() {
  const {products} = useLoaderData<typeof loader>();

  return (
    <div className="mx-auto p-12 grid grid-cols-1 gap-4">
      <h1 className="text-3xl font-bold">All Products</h1>
      {products.map((product) => (
        <p key={product.id}>
          <Link className="text-blue-500" to={`/products/${product.handle}`}>
            {product.title}
          </Link>
        </p>
      ))}
    </div>
  );
}
```

Visit `/collections/all` on your Hydrogen store now, you should see a list of up to 10 products with links to their individual product pages. 

![Products index page showing products from Shopify](https://cdn.sanity.io/images/3do82whm/next/6eb7b95a1e0def53169f9ec49da868317d252f26-2144x1388.png)

These will return 404 if you click them; let’s fix that.

## Create the “product” route

This route below also uses the same loader to fetch data but also takes advantage of the variable `$handle` to find a specific product.

1. **Create** a new product page route

```tsx:web/app/routes/products.$handle.tsx
import {Link, useLoaderData, type LoaderFunctionArgs} from 'react-router';
import {type Product} from '@shopify/hydrogen/storefront-api-types';

export async function loader({
  params,
  context: {storefront},
}: LoaderFunctionArgs) {
  const {product} = await storefront.query<{product: Product}>(
    `#graphql
      query Product($handle: String!) {
        product(handle: $handle) { id title }
      }
    `,
    {variables: params},
  );

  return {product};
}

export default function Product() {
  const {product} = useLoaderData<typeof loader>();

  return (
    <div className="mx-auto p-12">
      <h1 className="text-3xl font-bold">{product.title}</h1>
      <Link className="text-blue-500" to="/collections/all">
        &larr; Back to All Products
      </Link>
    </div>
  );
}
```

Now you should be able to view a specific product from the `/products` page and click through.

![Individual product page showing content from Shopify](https://cdn.sanity.io/images/3do82whm/next/e090166993538ca182182298051a8cdade9d0837-2144x1388.png)

If your site looks like this, congratulations! Your Hydrogen app now queries Shopify content directly from your store.

What you don’t have is the additional content from your Sanity Studio. Let’s fix that next.