useInfiniteQuery returning Old data

[firaki12345-cmd]

hi so i have my code below, that when the varaible color_name changes it passes that variable to the initialpageparmas

so for example when the color_name = "black", it fetches all the data related to black

but when i dynamilly change it to pink. it still feteches the old Black color data

i tired using useEffect, still it uses the same color_name = black and not pink

my code below

'use client';

import { useEffect, useState} from 'react';


import { useInfiniteQuery ,useQueryClient} from '@tanstack/react-query';

const Colors_Loading = ({color_name}) => {

  const [new_color, Setnewcolor] = useState(() => color_name)

  useEffect(() => {
    Setnewcolor(color_name)
    console.log("COLORNAME:", new_color)
    // Invalidate every query in the cache
      queryClient.invalidateQueries()
    // Invalidate every query with a key that starts with `colored`
      queryClient.invalidateQueries({ queryKey: ['colored'] })
  },[new_color])


  let { data, fetchNextPage, hasNextPage, isFetching, isLoading } = useInfiniteQuery({
    queryKey: ['colored'],
    queryFn: async ({ pageParam }) => {
      const single_data = await fetch(`http://localhost:3000/api/color/${pageParam[0]}/${pageParam[1]}`);

      const response = await single_data.json();
      return response;
    },
    retry: 1,
    initialPageParam: [new_color,0],
    getNextPageParam: (lastPage) => {
      const lastprod = lastPage.lastprodsid ?? null
      console.log(new_color,lastprod)
      return [new_color,lastprod]
      }
  });

  console.log("DATA:",data)

[firaki12345-cmd]

ok found the SOLUTION, i just had to pass the variable to the queryKey

queryKey: ['colored',color_name],