How to pass multiple params or any other Objects to my fetcher without getting infinite loop?

[bymoe]

I have this fetcher:

const fetcher = (url, params, auth) => {
  return axios
    .get(url, {
      params,
      headers: generateHeaders(auth),
    })
    .then((res) => res.data);
};

I have this helper

const useJobs = (params, auth) => {
  return useSWR(
    [
      `${INDEXER.JOBS}`,
      params,
      auth,
    ],
    (url, params, auth) => fetcher(url, params, auth)
  );
};

Now why this gives an infinite loop?
const { data, error } = useJobs({ param1: "hi", param2: "hi" }, { token: layout.token });
this useJobs has to accept multiple params, not just single value, how to do this?

[daveteu]

You don't need to add in the arguments. Just use the following. In the example I pass in the params as strings.

const useJobs = (params, auth) => {
  return useSWR([`/abc`, params, auth], fetcher);
};

Sandbox: https://codesandbox.io/s/trusting-lumiere-he9km?file=/src/App.js
Doc: https://swr.vercel.app/docs/arguments#multiple-arguments