Issue with useQuery initialData

[mortezaisvand]

I am using react-query v5 in a next.js 14 project. The problem is that I cannot retrieve cached photo in photo detail component via initialData option.
here is the first component where i fetch a list of photos from jsoanplaceholder api:

"use client";

import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import Image from "next/image";
import Link from "next/link";

export interface Photo {
  id: number;
  title: string;
  url: string;
}

const PhotoPage = () => {
  const PER_PAGE = 10; // Number of photos per page.

  // Fetch photos. pageParam is provided by react query automatically.
  const fetchPhotos = async ({ pageParam }: { pageParam: unknown }) => {
    const res = await axios.get(
      `https://jsonplaceholder.typicode.com/photos?_start=${pageParam}&_limit=${PER_PAGE}`
    );
    return res.data;
  };

  const { data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery<Photo[]>({
      queryKey: ["photos"],
      queryFn: fetchPhotos,
      getNextPageParam: (lastPage, allPages) =>
        lastPage.length === 0
          ? undefined
          : allPages.length * PER_PAGE /* Determines next pageParam value:
           undefined, 1 * 10, 2 * 10, 3 * 10, ...
         */,
      initialPageParam: 0 /* Initial pageParam value that
        is passed to the fetchPhotos function (queryFn).
       */,
    });

  return (
    <div className="bg-neutral-800">
      {/* Render photos */}
      <div className="w-2/3 mx-auto py-8 ">
        {data?.pages.map((photos, index) => (
          <div key={index} className="flex flex-wrap gap-4">
            {photos.map((photo) => (
              <article key={photo.id} className="flex flex-col items-center">
                <Link href={`/photos/${photo.id}`}>
                  <Image
                    src={photo.url}
                    alt={photo.title}
                    width={100}
                    height={100}
                  />
                </Link>
                <p>{photo.id}</p>
              </article>
            ))}
          </div>
        ))}
      </div>

      {/* 'Load More' button*/}
      {hasNextPage && (
        <button
          onClick={() => fetchNextPage()}
          className="bg-neutral-700 px-4 py-1.5 rounded-md m-8"
          disabled={isFetchingNextPage}
        >
          {isFetchingNextPage
            ? "loading..."
            : hasNextPage
            ? "load more"
            : undefined}
        </button>
      )}
    </div>
  );
};
export default PhotoPage;

and here is the photo detail component in which i try to avoid loading state by fetching photo from the cache:

"use client";

import { useQuery, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import Image from "next/image";
import { Photo } from "../page";

interface Props {
  params: {
    id: string;
  };
}

interface CachedData {
  pages: Photo[];
  pageParams: number[];
}

const PhotoDetail = ({ params }: Props) => {
  const queryClient = useQueryClient();
  const fetchPhoto = async () => {
    const res = await axios.get(
      `https://jsonplaceholder.typicode.com/photos/${params.id}`
    );
    return res.data;
  };

  const {
    data: photo,
    isPending,
    isError,
    error,
  } = useQuery<Photo>({
    queryKey: ["photo", params.id],
    queryFn: fetchPhoto,
    staleTime: 1 * 60 * 1000, // 1 minute.
    initialData: () => {
      const cachedData = queryClient.getQueryData<CachedData>(["photos"]);
      if (cachedData) {
        console.log("cachedData::::", cachedData.pages); // an array of page object.
        console.log(
          "cachedPhoto::::",
          cachedData.pages.find((photo) => photo.id === 1)
        ); // undefined !!!;
        return cachedData.pages.find(
          (photo) => photo.id === parseInt(params.id)
        );
      }
    },
    initialDataUpdatedAt: () =>
      queryClient.getQueryState(["photos"])?.dataUpdatedAt,
  });

  if (isPending) return <p>Loading...</p>;

  if (isError) return <p>{error.message}</p>;

  return (
    <div>
      <Image src={photo.url} alt={photo.title} width={100} height={100} />
    </div>
  );
};
export default PhotoDetail; 

But i still see "Loading ..." state and nothing is fetched from the cache.

[mortezaisvand]

I found the problem. The problem was on CachedData interface.
Here is the corrected version:

interface CachedData {
  pages: Photo[][];
  pageParams: number[];
}

In fact, pages is an array of Photo array.

and here is the initialData option:

initialData: () => {
      const cachedData = queryClient.getQueryData<CachedData>(["photos"]);
      if (cachedData) {
        return cachedData.pages
          .flat()
          .find((photo) => photo.id === parseInt(params.id));
      }