当导航参数更新时使用 useSWR 进行 api 调用，并将其值存储在带有 contextAPI 的自定义挂钩上

Question

I want to make an API call with useSWR when navigation(route)'s params updates and store his value on a custom hook with contextAPI.

I have this component UsersPage that renders a list of users, it needs to have pagination, and when I click on some user, share his link based on his id and query requested (page, userId, nationality=nat, gender, etc).

I'm considering using useSWR for a better User Experience.

I tried

import { useUsers } from "../../hooks/useUsers";
import { useFetch } from "../../hooks/useFetch";

.
.
.

const { pageNumber, userId } = useParams();

const {
    selectedGender,
    nationality,
    results,
    showDetails,
    page,
    isAscending,
    toggleIsAscending,
    selectedUser,
    formattedName,
    formattedBirth,
    getQuery,
  } = useUsers();

useEffect(() => {

    const users = useFetch(getQuery());
//then update users state on useUsers Context's hook and render data on Context's child nodes
  }, [pageNumber]);

on custom hook useUsers the function getQuery is

  const getQuery = () => {
    const query = `&gender=${selectedGender}&nat=${nationality}&page=${page}&results=${results}`;

    return query;
  };

On useFetch hook I have:

import useSWR from "swr";

export function useFetch(query) {
  const API_URL = process.env.REACT_APP_API_URL;

  const fetcher = async (query) => {
    const FormedURL = `${API_URL}${query}`;

    const response = await fetch(FormedURL);
    const data = await response.json();

    return data.results;
  };
  const { data, error } = useSWR(query, fetcher);

  return { users: data, error };
}

I received: 'React Hook "useFetch" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.'

Have someone done this before and share your experience/advice?

Answer 1

I would try something like this:

const { pageNumber, userId } = useParams();

const {
    selectedGender,
    nationality,
    results,
    showDetails,
    page,
    isAscending,
    toggleIsAscending,
    selectedUser,
    formattedName,
    formattedBirth,
    getQuery,
  } = useUsers();

const { get, response } = useFetch(getQuery())

const fetchUsers = async () {
    const users = await get()
    if (response.ok){
        // sets users...
    }
}

useEffect(() => {
    fetchUsers()
}, [pageNumber]);