Estoy tratando de aprender reaccionar-consulta y he estado siguiendo bastantes guías. Sin embargo, cada vez que intento con los parámetros, algo sale mal. Este código que tengo debajo sigue diciéndome que no se pueden leer las propiedades de indefinido (leyendo 'id') aunque console.log(id) imprime el número correcto.
const PracticeList = ({id}) => { const idTest = id conosole.log(idTest) //this prints 190 and is not undefined const { isLoading, isFetching, data, isError } = useQuery(["list",{id:idTest}],GetList,{ retry:1, retryDelay:500 }) if (isLoading) { return <p>Loading</p> } if (isError) { return <p>Error getting posts...</p> } return ( <div> {isFetching && <p>Updating</p>}{data &&<p>{data.lists}</p>}</div> ) } export const GetList = async(key,obj)=>{ console.log(key,obj) //This prints that key is defined but obj is undefined? const {data} = await ShoppingListAPI.get(`/getShoppingList`,{id:obj.id}); return data; }Esto nunca sucede realmente, ya que se bloquea antes, pero sé que funciona por cartero.
import axios from 'axios'; export default axios.create({ baseURL:"http://localhost:3005/api/v1/", });Aquí es donde configuro el Id por cierto.
import './App.css'; import {Container, Typography} from '@mui/material' import AllLists from './AllLists'; import { useState } from 'react'; import ShoppingList2 from './ShoppingList2'; import Practice from './Practice'; import PracticeList from './PracticeList'; function App() { const [activeList, setActiveList]= useState(190) return ( <div className="App"> <Typography>Shopping list</Typography> <Container maxWidth="lg"> <Practice/> {activeList&&<PracticeList id={activeList}/>} </Container> </div> ); } export default App;desde v3, react-query inyecta un objeto llamado QueryFunctionContext en queryFn. Contiene la clave de consulta, entre otra información.
Así que si tu consulta es:
useQuery(["list",{id:idTest}],GetList) puede extraer la clave de consulta en GetList a través de:
const GetList = (queryFunctionContext) => { const queryKey = queryFunctionContext.queryKey } queryKey[0] será entonces "list" y queryKey[1] debería ser su objeto que contiene la id .
prueba esto
()=>GetList(idTest) const { isLoading, isFetching, data, isError } = useQuery(["list",{id:idTest}],()=>GetList(idTest),{