How to dynamically change InitialPageParams in react tan stack query ?

[firaki12345-cmd]

for me it shows undefined, even if when i call the isSuccess function of the useQuery

i am using both the query below, First one is UseQuery, 2nd one is UseInfiniteQuery

i am trying to pass the data i get from usequery to infinitequery, so it will be only enabled once isSuccess is called

CODE BELOW:

const Get_Similar_Items = ({ myslug }) => {

const fetchData = async () => { 

const response = await fetch(http://localhost:3000/api/slug/${myslug}); 
const data = await response.json(); 
return data; };

const { data: singleQueryData, error: singleQueryError, isLoading: singleQueryLoading,isSuccess,isFetched } = useQuery({ 

queryKey: ['myData', myslug], 
queryFn: fetchData, 
retry: 1, });

let datacountry, 
let datacategory, 
let datacolor,


**# USE INFINITE QUERY BELOW....**


const { data: infiniteQueryData, isLoading: infiniteQueryLoading, error: infiniteQueryError, fetchNextPage, hasNextPage, isFetching: infiniteQueryIsFetching, } = useInfiniteQuery({ 

queryKey: ['similarproducts', myslug], 

enabled: isSuccess, 

queryFn: async ({ pageParam }) => { 
const my_data = await fetch(http://localhost:3000/api/similar/${pageParam[0]}/${pageParam[1]}/${pageParam[2]}/${pageParam[3]}, { cache: 'no-store' }); 
const response = await my_data.json(); 
return response; }, 

retry: 1, 

initialPageParam: [datacountry,datacategory,datacolor,0], 

getNextPageParam: (lastPage) => { 
const lastprod = lastPage.lastprodsid ?? null; 
if (lastprod !== null) { 
return [datacountry,datacategory,datacolor,lastprod]; 
} }, 
});


**CHECKING LOADING STATES OF BOTH BELOW and also ISSUCCESS**


if (singleQueryLoading || infiniteQueryLoading) { 
return <h1>LOADING...</h1>; 
}

if (singleQueryError || infiniteQueryError) { 
return <h1>ERROR</h1>; 
}

if (isSuccess) { 
datacountry = singleQueryData.data.country; 
datacategory = singleQueryData.data.category; 
datacolor = singleQueryData.data.color; 
}

[firaki12345-cmd]

ok i figured it out by just using only useInfinitequery,

first i will fetch the data on the api/slug path and get the data from there and then pass it to the other path (IF THE DATA IS VALID)

const Get_Similar_Items = ({ myslug }) => {

  let my_data;
  let country;
  let category;
  let color;

  const {
    data,
    isLoading,
    isError,
    fetchNextPage,
    hasNextPage,
    isFetching,
  } = useInfiniteQuery({
    queryKey: ['similarproducts', myslug],
    queryFn: async ({ pageParam }) => {
      if(pageParam[0] === myslug){
        my_data = await fetch(`http://localhost:3000/api/slug/${pageParam[0]}`, { cache: 'no-store' });      
      }else{
        my_data = await fetch(`http://localhost:3000/api/similar/${pageParam[0]}/${pageParam[1]}/${pageParam[2]}/${pageParam[3]}`, { cache: 'no-store' });
      }
      const response = await my_data.json();
      return response;
    },
    retry: 1,
    initialPageParam: [myslug],
    getNextPageParam: (lastPage) => {
      const lastprod = lastPage.lastprodsid ?? null;
      if (lastprod !== null) {
        country = lastPage.country;
        category = lastPage.category;
        color = lastPage.color;
        return [country,category,color,lastprod];
      }
    },
  });

  const loadMore = () => {
    if (hasNextPage && !isFetching) {
      setTimeout(() => {
        fetchNextPage();
      }, 3000);
    }
  };

  const ref = useIntersectionEffect(loadMore);

  // const skeleton_arr = [1, 2, 3, 4, 5, 6];

  if (isLoading) {
    return <h1>LOADING...</h1>;
  }

  
  if (isError) {
    return <h1>ERROR</h1>;
  }
  
  }