Estoy usando React-query para mis llamadas a la API. Me pregunto si hay una manera de llamar a la consulta de forma perezosa.
Lo que significa llamar a la consulta solo cuando cambia un parámetro de consulta.
Esto es lo que tengo actualmente; Estoy usando un truco con el "useEffect" en el que, si el nombre de la receta cambia, ejecuta la función de recuperación.
export const searchRecipeByName = async (recipeName: string) => { return await api.get( `/recipes/complexSearch?apiKey=${process.env.NEXT_PUBLIC_SPOONACULAR_API_KEY}&query=${recipeName}&addRecipeInformation=true&fillIngredients=true` ); }; const [recipeName, setRecipeName] = useState(""); const { data, refetch } = useQuery( "homePageSearchQuery", () => searchRecipeByName(recipeName), { enabled: false } ); // HACK useEffect(() => { if (!!recipeName) { refetch(); } }, [recipeName]); const handleOnSearchSubmit = async (recipeSearch: RecipeSearch) => { setRecipeName(recipeSearch.search); };Preferiblemente, me gustaría llamar a la consulta en la función "handleOnSearchSubmit".
Podría crear un enlace useLazyQuery personalizado para manejar esto, pero me pregunto si React-query tiene una forma nativa de manejar esto.
Preferiblemente, me gustaría llamar a la consulta en la función "handleOnSearchSubmit".
Esta es una forma bastante imperativa de pensar en las cosas, pero reaccionar-consultar es más declarativo. No especifica: "cuando hago clic en ese botón, quiero buscar", pero simplemente dice: "estas son las entradas que necesito" y react-query volverá a buscar cada vez que esas entradas cambien.
Entonces, lo que quiere hacer es poner las cosas que necesita para que su consulta se ejecute en la clave de consulta, para que reaccione-consulta
const [recipeName, setRecipeName] = React.useState('') const { isLoading, data } = useQuery( ['homePageSearchQuery', recipeName], () => searchRecipeByName(recipeName), { enabled: !!recipeName } ]) luego, todo lo que necesita hacer es llamar a setRecipeName en handleOnSearchSubmit y react-query hará la consulta.
algunas cosas más que tal vez quieras considerar:
recipeName keepPreviousData: truerecipeName el nombre de la receta. Si eso no sucede al hacer clic en un botón, pero digamos que cada vez que el usuario escribe algo en un campo de entrada, desea eliminar el rebote. Para esos casos, considere algo como useDebounce : const [recipeName, setRecipeName] = React.useState('') const debouncedRecipeName = useDebounce(recipeName, 1000) const { isLoading, data } = useQuery( ['homePageSearchQuery', debouncedRecipeName], () => searchRecipeByName(debouncedRecipeName), { enabled: !!debouncedRecipeName } ])Esto le permitirá ingresar datos y mostrarlos en un campo de texto, pero solo crea una nueva entrada de caché/dispara una nueva solicitud después de 1 segundo de inactividad.
Hazlo asi
const { isLoading, data } = useQuery([ 'homePageSearchQuery', {recipeName}], () => searchRecipeByName(recipeName), {} );Ejecutará la consulta cada vez que cambie el valor de nombreReceta.