pass function as parameter to custom hooks

Question

I am trying to pass a function as a parameter to custom hooks I created. The file that uses the hooks and it is it self a custom hook is this:

export const MainStore = () => {
  ...

  const checkForRefreshTokenUpdate = async () => {
    ...
  }

  const { getAssetData } = assets(checkForRefreshTokenUpdate());

  ...
}

second file:

export const assets = ( checkForRefreshTokenUpdate ) => {

  const { customAxios } = interceptedAxios(checkForRefreshTokenUpdate);

  /**
   * Fetches asset data.
   * @returns
   */
  const getAssetData = async (params) => {
    const url = buildUrl({
      baseUrl: getBaseUrl(),
      endpoint: "/api/asset",
      params
    });

    const reqOpts = {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${getAccessToken()}`
      }
    };

    return customAxios.get(url, reqOpts).then(res => { res.data });
  };

  return { getAssetData }
}

third file:

export const interceptedAxios = ( checkForRefreshTokenUpdate ) => {

  const customAxios = axios.create();

  customAxios.interceptors.request.use(async (config) => {

    if (config.url.includes(getBaseUrl()) && config.headers["Authorization"] != null) {
      await checkForRefreshTokenUpdate()
        .then((token) => {
          if (token != null) {
            config.headers["Authorization"] = `Bearer ${token}`;
          }
        });
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  });

  return { customAxios }
}

I keep getting error: ReferenceError: checkForRefreshTokenUpdate is not defined.

Is there anything wrong in syntax?

score 1 · Answer 1 · answered Jun 23 '22 at 08:40

1

try to pass the checkForRefreshTokenUpdate function without parenthesis:

wrong :

const { getAssetData } = assets(checkForRefreshTokenUpdate());

correct :

const { getAssetData } = assets(checkForRefreshTokenUpdate);

answered Jun 23 '22 at 08:40

Shadi Amr

494
3
9

score 1 · Answer 2 · answered Jun 23 '22 at 08:59

I agree with previous comment that first mistake you made is because you immediately called function while passing to custom "hook". So, first you need to update that part of the code as previous comment suggest to you, to pass just an reference and not the result(promise). Second mistake I spotted is this:

await checkForRefreshTokenUpdate()
    .then((token) => {
      if (token != null) {
        config.headers["Authorization"] = `Bearer ${token}`;
      }
    });

You must not use await with .then, await itself will pause the excecution until promise is resolved, so you need to update code to this:

const token = await checkForRefreshTokenUpdate();

if (token != null) {
   config.headers["Authorization"] = `Bearer ${token}`; 
}

You must either use .then syntax or async/await, you cant mix them.

yessss! i didn't notice that , perfect! – Shadi Amr Jun 23 '22 at 09:01 — Shadi Amr, Jun 23 '22 at 09:01

score 0 · Answer 3 · answered Jun 23 '22 at 09:04

Anyway beside my first answer and second one from Milos i would like to define checkForRefreshTokenUpdate inside third file (interceptedAxios), that's cleaner and less confusion because it's not used anywhere else, even if you wanna use it you can easily export it from there!

pass function as parameter to custom hooks

3 Answers3