I have an api which provides me methods like:
I am implementing a hook "useFetchUsers", which will provide an interface to access these methods.
This is my current code:
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
}
}
The main problem I am facing, is that I don't know how to make this "interface" more flexible, in order to be able to pass arguments to my QUERY methods.
Also, my defaultOptions object doesn't need the fields "username" for the methods "getRandomPremiumUsers" and "getRandomYoungUsers".
Any ideas about how to fit the requirements following a similar abstraction?
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>
);
}
So depending upon your use case you can implement caching in API layer itself or extend it with a context API