Estoy creando una aplicación de trivia utilizando la API de OpenTBD .
Utilizo SWR para realizar mis solicitudes de API y obtener las preguntas y respuestas que quiero mostrar cuando mi componente se procesa.
Llamada API:
import useSWR from "swr"; export function useFetch(category, amount, difficulty) { const url = `https://opentdb.com/api.php?amount=${amount}&category=${category}&difficulty=${difficulty}&type=multiple`; const fetcher = (...args) => fetch(...args).then((res) => res.json()); const { data, error } = useSWR(url, fetcher, { revalidateOnFocus: false, }); return { data: data, isLoading: !error && !data, isError: error, }; }Componente :
function Quiz() { const { category, color } = useSelector((state) => state.start); const { amount, difficulty } = useSelector((state) => state.settings); const gameEnded = useSelector((state) => state.end.isEnded); const dispatch = useDispatch(); const { data, isLoading, isError } = useFetch(category, amount, difficulty); if (isLoading) { return <FlowerSpinner color={color} />; } if (isError) { return <div>An error has occured.</div>; } dispatch(updateQuestions(createQuestions(data.results))); return ( <> <Questions /> {gameEnded ? <PlayAgainBtn /> : <VerifyButton />} </> ); } export default Quiz;Esto funciona bien, pero ahora, cuando el juego termina, aparece el botón "Reproducir de nuevo" y me gustaría agregar un clic para crear una nueva búsqueda para obtener un nuevo conjunto de preguntas. No puedo llamar al gancho useFetch dentro de una función como hacer:
<button onClick={() => useFetch(newArgs)} /> así que traté de usar mutate pero creo que porque estoy usando la misma URL (la cantidad, la categoría y la dificultad no cambian) cuando llamo a mutate, no se obtienen nuevos datos
Podrías probar la obtención condicional que me ha funcionado antes. No recuerdo si invalida el caché de SWR, pero recuerdo que es la respuesta correcta sobre mutate . Mi idea es que cuando selecciona el botón "Reproducir de nuevo", podría tener un estado como
const [playAgain, setPlayAgain] = useState(false) Esto se pasa a useFetch y puede estructurar useSWR así:
const { data, error } = useSWR(playAgain ? url : null, fetcher, { revalidateOnFocus: false, });Deberá encontrar una solución para el primer juego, pero ese muy bien podría ser otro estado para manejar eso.