Loop through data from Custom Type

Developing with Prismic
1

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.

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:

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)
2

Resolved by changing to this:

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;