# Loop through data from Custom Type

**URL:** <https://community.prismic.io/t/loop-through-data-from-custom-type/13553>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [July 2, 2023, 5:10am UTC](https://community.prismic.io/t/loop-through-data-from-custom-type/13553 "2023-07-02T05:10:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![gweatherson](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@gweatherson](https://community.prismic.io/u/gweatherson)\
**Post date:** [July 2, 2023, 5:10am UTC](https://community.prismic.io/t/loop-through-data-from-custom-type/13553/1 "2023-07-02T05:10:46Z")

</div>

Brand new here, so apologies on the very basic request. Using the minimal next js starter, I'm trying to loop through each item in the Custom Type of "dogs", with the field of "dog\_name". The API access is open.

```auto
import { Content, PrismicClient } from "@prismicio/client";
import { SliceComponentProps } from "@prismicio/react";
import { useEffect, useState } from "react";

/**
 * Props for `DogListing`.
 */
export type DogListingProps = SliceComponentProps<Content.DogListingSlice>;

/**
 * Component for "DogListing" Slices.
 */
const DogListing = ({ slice }: DogListingProps): JSX.Element => {
  const [dogs, setDogs] = useState<string[]>([]);

  useEffect(() => {
    const fetchDogs = async () => {
      try {
        const client = PrismicClient.client("https://glennn.cdn.prismic.io/api/v2");

        const response = await client.query('[at(document.type, "dogs")]', {
          // Customize your query as needed
          // orderings: "[my.dogs.dog_name]",
        });

        if (response) {
          const dogNames = response.results.map((dog) => dog.data.dog_name);
          setDogs(dogNames);
        }
      } catch (error) {
        console.error("Error fetching dogs:", error);
      }
    };

    fetchDogs();
  }, []);

  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <h2>{slice.primary.title}</h2>

      {dogs.map((dogName, index) => (
        <div key={index}>{dogName}</div>
      ))}
    </section>
  );
};

export default DogListing;

```

The error I'm seeing is:

```auto
Error fetching dogs: TypeError: Cannot read properties of undefined (reading 'client')
    at fetchDogs (index.tsx:19:24)

Error fetching dogs: TypeError: Cannot read properties of undefined (reading 'client')
    at fetchDogs (index.tsx:19:24)

```

---

<div class="post-metadata">

**Author:** ![gweatherson](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@gweatherson](https://community.prismic.io/u/gweatherson)\
**Post date:** [July 2, 2023, 4:48pm UTC](https://community.prismic.io/t/loop-through-data-from-custom-type/13553/2 "2023-07-02T16:48:48Z")

</div>

Resolved by changing to this:

```auto
import * as prismic from '@prismicio/client';
import fetch from 'node-fetch';
import { SliceComponentProps } from "@prismicio/react";
import { useState, useEffect } from 'react';

const routes = [
  {
    type: 'page',
    path: '/:uid',
  },
];

const repoName = 'glennn';
const client = prismic.createClient(repoName, { routes, fetch });

const init = async () => {
  const dogs = await client.getAllByType('dogs', {
    orderings: {
      field: 'document.first_publication_date',
      direction: 'desc',
    },
    lang: 'en-us',
  });

  return dogs;
};

/**
 * Props for `DogListing`.
 */
export type DogListingProps = SliceComponentProps<Content.DogListingSlice>;

/**
 * Component for "DogListing" Slices.
 */
const DogListing = ({ slice }: DogListingProps): JSX.Element => {
  const [dogs, setDogs] = useState<DogsDocument<string>[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const fetchedDogs = await init();
      setDogs(fetchedDogs);
    };

    fetchData();
  }, []);

  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <h2>{slice.primary.title}</h2>

      {dogs.map((dog) => (
        <div key={dog.id}>
          <h3>{dog.data.dog_name}</h3>
        </div>
      ))}
    </section>
  );
};

export default DogListing;

```