Necesito pasarle un parametro que va a ser el pageNumber desde el componente al context para que el pageNumber se pueda usar en el context para que en el context pueda hacer el fetch a la API con el correspondiente numero que le paso el componente
Codigo del Context:
import { useQuery } from '@tanstack/react-query';
export const PhotosContext = createContext()
function AppContextProvider(props) {
const pageNumber = 1
const {isLoading, data:fotos, isError, error} = useQuery({queryKey: ["fotos"], queryFn: async () => {
return await fetch(`http://127.0.0.1:5000/api-content/images/${pageNumber}`)
.then((response) => response.json())
},
staleTime: 300 * 1000 // cache data for 300 seconds
});
return (
<PhotosContext.Provider value={{
fotos,
isLoading,
}}>
{props.children}
</PhotosContext.Provider>
);
}
export default AppContextProvider;
y este es el codigo del componente:
import Products from './products';
import { useParams } from 'react-router-dom';
import Navbar from './Views/Navbar';
import Spinner from './Views/Sppiner';
import { PhotosContext } from '../context/Appcontext';
function TaskFotos(){
const {pageNumber} = useParams();
const {fotos,isLoading} = useContext(PhotosContext)
if (isLoading) return <Spinner />
return(
<>
<Navbar/>
<div className="bg-white">
<div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-6xl lg:px-4">
<h2 className="text-3xl text-center font-bold tracking-tight text-gray-900">Products</h2>
<div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-24">
{fotos?.map((foto, index) => (
<Products id={foto?.id} image={foto?.image} name={foto?.name} price={foto?.price} key={index}/>
))}
</div>
</div>
</div>
</>
);
}
export default TaskFotos;
En la documentacion no aparece nada(por lo que vi) y GPT me tiro cualquier cosa.
Alguna sugerencia? desde ya muchas gracias.