Tengo una API que me proporciona métodos como:
Estoy implementando un enlace "useFetchUsers", que proporcionará una interfaz para acceder a estos métodos.
Este es mi código actual:
import { useState, useEffect } from "react"; import { searchUsersByUsername, getRandomPremiumUsers, getRandomYoungUsers, } from "../../services/firebase/api/users/search" import { MAX_SEARCH_USERS_BY_USERNAME_TO_RETRIEVE } from "../../utils/search"; export const QUERIES = { "SEARCH_USERS_BY_USERNAME": searchUsersByUsername, "FETCH_RANDOM_PREMIUM_USERS": getRandomPremiumUsers, "FETCH_RANDOM_YOUNG_USERS": getRandomYoungUsers, }; const defaultOptions = { query: QUERIES[0], username: "", // optional limit = MAX_SEARCH_USERS_BY_USERNAME_TO_RETRIEVE, // optional }; export default function useFetchUsers(options = defaultOptions, deps) { const [users, setUsers] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(undefined); const getUsers = async () => { setIsLoading(true); try { const users = await options.query(); setUsers(users); } catch(err) { setError(err); } setIsLoading(false); } useEffect(getUsers, deps); return { users, isLoading, error, getUsers } }El principal problema al que me enfrento es que no sé cómo hacer que esta "interfaz" sea más flexible para poder pasar argumentos a mis métodos QUERY.
Además, mi objeto defaultOptions no necesita los campos "nombre de usuario" para los métodos "getRandomPremiumUsers" y "getRandomYoungUsers".
¿Alguna idea sobre cómo cumplir los requisitos después de una abstracción similar?
export default function useFetchUsers() { const initialState = { payload: null, error: null, inFlight: false, }; const [result, setResult] = useState(initialState); const searchUsersByUsername = () => { setResult({ payload: null, error: null, inFlight: true }); try { const payload = fetch("api"); setResult({ payload, error: null, inFlight: false }); } catch (error) { setResult({ payload: null, error: null, inFlight: false }); } }; return { ...result, searchUsersByUsername, }; } const api = { user: { searchUsersByUsername: (option) => { return fetch(option); }, getRandomPremiumUsers: (option) => { return fetch(option); }, getYoungUsers: (option) => { return fetch(option); }, }, }; export default function useFetchUsers() { const initialState = { payload: null, error: null, inFlight: false, }; const [result, setResult] = useState(initialState); const updateState = (fetcher, option) => { setResult({ payload: null, error: null, inFlight: true }); try { const payload = fetcher(option); setResult({ payload, error: null, inFlight: false }); } catch (error) { setResult({ payload: null, error: null, inFlight: false }); } }; return { ...result, updateState, }; } function App() { const { updateState, payload } = useFetchUsers(); return ( <div onclick={() => updateState(api.user.searchUsersByUsername, { username: 'name', limit: 10 }) } > searchUsersByUsername </div> ); }Entonces, dependiendo de su caso de uso, puede implementar el almacenamiento en caché en la capa API o extenderlo con una API de contexto