undefined while fetching data

[bwubta21122]

Describe the bug

app/product/product.jsx

"use client";
// import { useState, useEffect } from "react";
// import { useInView } from "react-intersection-observer";
import algoliasearch from "algoliasearch";
// import { useSearchParams } from 'next/navigation'
import ProductCart from "@/components/ProductCard/ProductCard";
import Projects from "./example";
import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';
// import algoliasearch from "algoliasearch";

const queryClient = new QueryClient()

export const dynamic = 'force-dynamic';

const Product = ({ search, data }) => {
  console.log(search);

  return (
    <div className="min-h-[329px] ml-[20px] max-md:ml-[8px] ">
      <div className=" w-full">
        <div className="flex justify-between"></div>
        {/* ProductCart */}
        <div className="flex flex-wrap gap-4 overflow-x-hidden h-full scrollbar">
          {/* {data.map((e, i) => (
            <ProductCart e={e} i={i} discount={false} />
          ))} */}
          <QueryClientProvider client={queryClient}>
            <Projects search={search} />
          </QueryClientProvider>
        </div>
      </div>
    </div>
  );
};

app/product/example.jsx

"use client";
// import { useState, useEffect } from "react";
// import { useInView } from "react-intersection-observer";
import algoliasearch from "algoliasearch";
// import { useSearchParams } from 'next/navigation'
import ProductCart from "@/components/ProductCard/ProductCard";
import Projects from "./example";
import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';
// import algoliasearch from "algoliasearch";

const queryClient = new QueryClient()

export const dynamic = 'force-dynamic';

const Product = ({ search, data }) => {
  console.log(search);

  return (
    <div className="min-h-[329px] ml-[20px] max-md:ml-[8px] ">
      <div className=" w-full">
        <div className="flex justify-between"></div>
        {/* ProductCart */}
        <div className="flex flex-wrap gap-4 overflow-x-hidden h-full scrollbar">
          {/* {data.map((e, i) => (
            <ProductCart e={e} i={i} discount={false} />
          ))} */}
          <QueryClientProvider client={queryClient}>
            <Projects search={search} />
          </QueryClientProvider>
        </div>
      </div>
    </div>
  );
};

app/api/search.jsx

import { NextResponse } from "next/server";
import algoliasearch from "algoliasearch";
import { NextRequest } from 'next/server'

// export const dynamic = 'force-static';

export async function fetchProducts({pageParam, query}) {
  const appID = process.env.ALGOLIA_APP_ID;
  const apiKey = process.env.ALGOLIA_API_KEY;
  console.log("hey")

  // Connect and authenticate with your Algolia app
  const client = algoliasearch(appID, apiKey);

  const index = client.initIndex("title");

  const searchParams = request.nextUrl.searchParams;
//   const query = searchParams.get('query');
//   const page = searchParams.get('page');

  let { hits } = await index.search(query, { hitsPerPage: 10, page: pageParam });
//   let stt = JSON.stringify(hits);
//   return Response.json(stt, { status: 200 });
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                data: hits,
                currentPage: pageParam,
                nextPage: pageParam + 1,
            })
        }, 1000)
    })
}

sorry about my inexperience as i am new to tanstack query. the above code is not working at all and the console.log(data) in example.jsx is returning undefined. I am not able to understand at all, can anyone help with it.

Your minimal, reproducible example

NA

Steps to reproduce

1. See the above section

Expected behavior

should just work and the hits in api/search.jsx should return

[
  {
    image: 'https://lh5.googleusercontent.com/p/AF1QipMxMF5Jv0gG_yHh0Pn0AlmOaeium-gvOaLEh-As=w393-h156-p-k-no',
    quantity: 60,
    image_link: 'https://m.media-amazon.com/images/I/61KVbKSnozL.jpg',
    address: 'Ravidas Dharamsala, 147, Naina Garh, Naraipura, Nagra, Jhansi, Uttar Pradesh 284003',
    keywords: [
      'decorations',
      ' ceramic vase',
      ' decorative',
      ' centerpiece',
      'vase'
    ],
    sub_category: 'Vases',
    date_created: '17/07/2024',
    rating: 4.6,
    link: 'https://www.example.com/link1',
    description: 'Decorative ceramic vase for centerpieces.',
    additional_image_link: [
      'https://assets.myntassets.com/h_720,q_90,w_540/v1/assets/images/28096136/2024/3/7/91be7b84-555a-4f0a-8ebd-b103d6fdd81d1709797342574ModernOrigamiPearShapedFlowersDecorativeCeramicBlueVaseforHo2.jpg'
    ],
    title: 'Decorative Ceramic Vase',
    in_stock: 'yes',
    sale_price: 16.99,
    seller_name: 'Balloon decoration in Jhansi',
    price: 19.99,
    sold_qnty: 37,
    property: { color: [Array] },
    id: '021q1wn9wpcwf038nkmt',
    category: 'Decorations',
    brand: 'ElegantDecor',
    seller_id: 'alzt9wd8xy3e',
    path: 'products/wLuckEFeif4cnKD5L6gl',
    objectID: 'wLuckEFeif4cnKD5L6gl',
    _highlightResult: { keywords: [Array], description: [Object], title: [Object] }
  },
  {
    quantity: 20,
    keywords: [ 'home ware', ' air purifier', ' electric', ' clean air' ],
    sub_category: 'Appliances',
    date_created: '14/07/2024',
    rating: 4.6,
    link: 'https://www.example.com/link100',
    description: 'Electric air purifier for clean and fresh air.',
    title: 'Electric Air Purifier',
    in_stock: 'yes',
    sale_price: 119.99,
    price: 129.99,
    sold_qnty: 32,
    id: 'ud17q76vfad44z3autf3',
    category: 'Home Ware',
    brand: 'PurifyAir',
    seller_id: 'x11o6t2nuwh8',
    image: 'https://lh5.googleusercontent.com/p/AF1QipOuYdX2HIvGX5oeW3dDYoVOhOIswmPSasWNCx6W=w507-h240-k-no',
    address: 'Near Choti Mata Mandir Ganesh Market, Sipri Bazar, Jhansi, Uttar Pradesh 284003',
    seller_name: 'New Crockery Collection & Gift Center',
    additional_image_link: [ 'https://m.media-amazon.com/images/I/51vuDMtJSBL._SL1500_.jpg' ],
    image_link: 'https://m.media-amazon.com/images/I/41oQgjHQQ8L._SL1000_.jpg',
    path: 'products/ud17q76vfad44z3autf3',
    objectID: 'ud17q76vfad44z3autf3',
    _highlightResult: { keywords: [Array], description: [Object], title: [Object] }
  },
...,
  {
    quantity: 20,
    keywords: [ 'toys', ' robot toy', ' interactive', ' voice recognition' ],
    sub_category: 'Robots',
    date_created: '14/07/2024',
    rating: 4.7,
    link: 'https://www.example.com/link96',
    description: 'Interactive robot toy for kids with voice recognition.',
    title: 'Interactive Robot Toy',
    in_stock: 'yes',
    sale_price: 39.99,
    price: 49.99,
    sold_qnty: 38,
    id: 'rw3x1l1e2sbu5eiwxvl1',
    category: 'Toys',
    brand: 'RoboTech',
    seller_id: 'vueehhr5vvon',
    image: 'https://lh3.googleusercontent.com/O4rUS3oLiKQRjhd-mxI1fN9pLWkMTOap6jUwbuW1hDxTqme6XRJWpxJYOaFkHUt7=w426-h240-k-no',
    address: 'The Khilona Store',
    seller_name: 'The Khilona Store',
    additional_image_link: [
      'https://m.media-amazon.com/images/I/41NJ-WHwNrL._SX300_SY300_QL70_FMwebp_.jpg'
    ],
    image_link: 'https://m.media-amazon.com/images/I/51H4AgVo6DL._SL1000_.jpg',
    path: 'products/rw3x1l1e2sbu5eiwxvl1',
    objectID: 'rw3x1l1e2sbu5eiwxvl1',
    _highlightResult: { keywords: [Array], description: [Object], title: [Object] }
  },
  {
    quantity: 40,
    keywords: [ 'toys', ' plush toy', ' teddy bear', ' cuddly' ],
    sub_category: 'Plush',
    date_created: '15/07/2024',
    rating: 4.4,
    link: 'https://www.example.com/link95',
    description: 'Plush teddy bear for cuddling and playtime.',
    title: 'Plush Teddy Bear',
    in_stock: 'yes',
    sale_price: 12.99,
    price: 14.99,
    sold_qnty: 12,
    id: 'rlg8uuuyhme8bbvpbrxq',
    category: 'Toys',
    brand: 'CuddleBear',
    seller_id: 'vueehhr5vvon',
    image: 'https://lh3.googleusercontent.com/O4rUS3oLiKQRjhd-mxI1fN9pLWkMTOap6jUwbuW1hDxTqme6XRJWpxJYOaFkHUt7=w426-h240-k-no',
    address: 'The Khilona Store',
    seller_name: 'The Khilona Store',
    additional_image_link: [
      'https://m.media-amazon.com/images/I/51-wgZgugsL._SX300_SY300_QL70_FMwebp_.jpg'
    ],
    image_link: 'https://m.media-amazon.com/images/I/41uJKXduB3L.jpg',
    path: 'products/rlg8uuuyhme8bbvpbrxq',
    objectID: 'rlg8uuuyhme8bbvpbrxq',
    _highlightResult: { keywords: [Array], description: [Object], title: [Object] }
  },
  {
    quantity: 30,
    keywords: [ 'watch', ' digital', ' water-resistant', ' swimming' ],
    sub_category: 'Digital',
    date_created: '16/07/2024',
    rating: 4.3,
    link: 'https://www.example.com/link94',
    description: 'Digital watch with water resistance for swimming.',
    title: 'Water-Resistant Digital Watch',
    in_stock: 'yes',
    sale_price: 69.99,
    price: 79.99,
    sold_qnty: 50,
    id: 'rix3dwchxa5opk85xoc8',
    category: 'Watch',
    brand: 'AquaTech',
    seller_id: 'bm338eo80hv7',
    image: 'https://lh3.googleusercontent.com/IrWiNUJCfsSokYXnpXfD41rY52JZ6rNMmzujOPJ9mRmd4Bd1Q8XyCOX6nNAfVcDJ3g=w426-h240-k-no',
    address: 'Tandon Rd, opp. PNB Bank, Chaman Ganj, Sipri Bazar, Jhansi, Uttar Pradesh 284003',
    seller_name: 'New Simon Watch Co.',
    additional_image_link: [ 'https://m.media-amazon.com/images/I/61bircRQoZL._SX679_.jpg' ],
    image_link: 'https://m.media-amazon.com/images/I/51gR-JUokxL._SX679_.jpg',
    path: 'products/rix3dwchxa5opk85xoc8',
    objectID: 'rix3dwchxa5opk85xoc8',
    _highlightResult: { keywords: [Array], description: [Object], title: [Object] }
  }
]```

### How often does this bug happen?

None

### Screenshots or Videos

_No response_

### Platform

- OS: OSX
- Browser: Arc (Chromium)

### Tanstack Query adapter

react-query

### TanStack Query version

latest

### TypeScript version

using js

### Additional context

_No response_