pass params to execute about axios-hooks

[simoneb]

The getUser function will take a request configuration that is the same as you would provide to axios. So:

const [{ data, loading, error }, getUser] = useAxios(
    // note I removed the query string from the url
    'https://api.github.com/search/users',
    {
      manual: true
    }
);

// them some time later

getUser({ params: { q: username } })

[morriq]

👍 for passing dynamic segment of url in manual invoke function.

something like:

/api/users/:userId

and then run({ userId })

[simoneb]

@muhsalaa you're welcome. Yes, when changing any of the parameters of the hook, the request is re-executed automatically without needing to invoke the execute function.

[flaviolivolsi]

@simoneb what about params in the URL? How to pass the param in that case?

Example:

const [{ data, loading, error }, getUser] = useAxios(
    'https://api.github.com/user/${username}',
    {
      manual: true
    }
);

[simoneb]

@flaviolivolsi one easy option would be to have username in the component state and use it in the Hook like this:

const [username, setUsername] = useState()

const [{ data, loading, error }, getUser] = useAxios(
   `https://api.github.com/user/${username}`,
    {
      manual: true
    }
);

// then somewhere in your code
setUsername('johndoe')

Depends on the use case but you get the idea

[muhsalaa]

Hi, I got the same issue here. I successfully fetched with params in options

{
    url: '/invitation/templates',
    method: 'GET',
    params: {type: typeState}
}

however, when I changed the typeState after choosing an option, and then refetch, I got the error below:

thought my fetch is still continued (the result I want still returned), I find difficulty when using an error interceptor that rejects the promise.

export function interceptorResponseError(error) {
  const response = error.response?.data?.error || [
    {
      code: 'unknown',
      message: 'There is something wrong. Please try again later.',
    },
  ];
  return Promise.reject(response);
}

now my error alert in my component will be shown because of this error. How can I get rid of the error response in the first image? where does the error come from?

[simoneb]

The error you see is a cancellation error, meaning that you're doing multiple requests and one is canceling the other. This library does cancellation automatically.

This suggests a user-land bug. Can you provide a repro?

[muhsalaa]

actually, I'm able to solve the problem now. When you said it because of multiple requests, I realize that my code is wrong. My mistake is I use refetch after changing the state.

const [type, setType] = useState('');

const [
    { data: vData, loading: vLoading, error: vError },
    refetch,
  ] = useRequest({ ...BuilderAPI.getInvitationTemplate, params: { type } });

I was thinking that I need to refetch after set a new type. Turns out it will automatically refetch when deps changes. Thanks for your response