Estoy usando la API de podcast de Listen Notes en las rutas de API de Next.js. Quiero que la consulta del usuario desde mi formulario front-end interactúe con la API de Next.js. Entonces, cuando un usuario ingresa "historial", lo enviará a la API para buscar podcasts que traten sobre ese tema. Intenté agregar parámetros a la solicitud de axios, pero parece que no funciona.

Interfaz:

 export default function SearchBar() { const [query, setQuery] = useState(""); const [address, setAddress] = useState(""); const fetcher = async (url) => await axios.get(url, { params: {q: query } }).then((res) => res.data); const { data, error } = useSWR(address, fetcher); const handleSubmit = (e) => { setAddress(`/api/podcast`); e.preventDefault(); }; return ( <> <Form onSubmit={handleSubmit}> <Input onChange={(e) => setQuery(e.target.value)} /> <SearchButton type="submit">Search</SearchButton> </Form> </> ); }

codigo API:

 const { Client } = require("podcast-api"); export default function handler(req, res) { const client = Client({ apiKey: process.env.REACT_APP_API_KEY || null, }); //"q" below should contain the user query from front-end client .search({ q: req.params }) .then((response) => { res.status(200).json(response.data); }) .catch((error) => { console.log("apiError: " + error); }); }

Por favor, hágamelo saber si necesito proporcionar más información.