Hay varios lugares en la aplicación donde se recupera una consulta específica después de diferentes mutaciones.
Ejemplo:
// Some component const [setUserLocation, setUserLocationResult] = useMutation(setUserLocationMutation, { refetchQueries: [{ query: getRecommendationsQuery }], }); Y en mi Componente de RecommendationsComponent quiero saber que esta consulta se está cargando, pero la loading de useQuery no se actualiza cuando se getRecommendationsQuery .
const { data, loading, // this loading is false all the time except first loading } = useQuery(getRecommendationsQuery); Puedo intentar poner useQuery de refetch en el contexto y usarlo en todas partes en lugar de refetchQueries prop, pero ¿hay una mejor manera de lograrlo sin ese truco sucio? ¿Hacer que la loading funcione o suscribirse a esa información usando el cliente apollo?
UseQuery Hook llamará a la API solo una vez. refetch llamar a la función de recuperación para volver a llamarla
const { data, loading, refetch: getRecommendations // <- use this function to refetch the data } = useQuery(getRecommendationsQuery); Esto también actualizará el estado de loading .
Obtuve dos respuestas en github para esa pregunta, las combiné y finalmente funcionó:
Pase notifyOnNetworkStatusChange: true a useQuery :
const { data, loading } = useQuery(getRecommendationsQuery, { notifyOnNetworkStatusChange: true });Pase documentos, no objetos para refetchQueries prop:
// Some component const [setUserLocation, setUserLocationResult] = useMutation(setUserLocationMutation, { refetchQueries: [getRecommendationsQuery], });Cuando se recupera la consulta, los datos se actualizarán. Puede suscribirse a los cambios en el objeto de data devuelto por el useQuery :
const { data, loading, } = useQuery(getRecommendationsQuery); useEffect(() => { console.debug("data has changed!", data]); }, [data]);