Question

0

205

Views

React Hooks - useFetch generalization

I have an api which provides me methods like:

searchUsersByUsername(username, limit)
getRandomPremiumUsers(limit)
getYoungUsers(maxAge, limit)

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?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T07:06:01.171Z

Create methods and return

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,
  };
}

Write an API helper that implements fetching logic

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

0

205

React Hooks - useFetch generalization

1 answers

0

Create methods and return

Write an API helper that implements fetching logic

Find remote jobs

Andres GPT