use-hooks / react-hooks-axios Goto Github PK

For example, right now you pull in an outdated axios version.

I feel that the name of the filter parameter is a bit confusing

When the component using this hook is unmounted, it cancels the request, which causes it to catch the error generated from the cancellation.

It then tries to update the state on an unmounted component resulting in this error:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

This might be a very dumb question but here it goes.

How does pagination work with this hook, for example in apollo the useQuery returns a fetchMore function which we get the previous data and pass in the new params to fetch and handle pagination easily.

How do we re-fetch data with different variables?
How do we handle pagination?

Hi, good work guys.
I think about the implementation of canceling the request when the component is unmounted, cancel the previous request and add a type of debounce.
What do you think about this?

In my personal use, I replace loading for status(status of request) => ["loading", "success", "error", "init"] is more clear in the moment to know the request status

I experience that the axios parameter in useAxios is not optional, but it says so in the documentation.

Bug?

I use the next.js framework and like other SSR frameworks, builds the app in node. I'm getting the error I'm pasting below from "I have no idea where" but I think it might be inside react-hooks-axios using the window object. Is that possible. Feel free to close right away if this isn't the case and sorry for the trouble.

ReferenceError: window is not defined
at Object. (/Users/peterkellner/Documents/pluralsight-course-using-react-hooks/05-Combing-React-Hooks-REST-Example/_experimental/M3-clip10-useMemo-to-Cache-Speaker-Sorted-Data/node_modules/
use-hooks/axios/dist/index.js:1:361
Module._compile
internal/modules/cjs/loader.js:689:30
Module._extensions..js
internal/modules/cjs/loader.js:700:10
Module.load
internal/modules/cjs/loader.js:599:32
tryModuleLoad
internal/modules/cjs/loader.js:538:12
Function.Module._load
internal/modules/cjs/loader.js:530:3
Module.require
internal/modules/cjs/loader.js:637:17
require
internal/modules/cjs/helpers.js:22:18
@use-hooks/axios
webpack:/external "@use-hooks/axios":1

Hello community,

who to catch the error message so that I would not see it in dev console in a browser (?)
GET http://URL net::ERR_CONNECTION_TIMED_OUT

thanks!

Hi, #16 solves the problem of not updating the state after umounting by canceling the call.
However sometimes it desiderable to run the call when the component is unmounted (ex autosave on close). It could be resolved with an option allowing axios to run after unmount, but not setting the results in the state variables. If anybody thinks this is the correct approach I could try to write a patch.

My project currently contains this code to set up an axios instance with some customizations:

export const myAxios = axios.create({
    paramsSerializer: params => qs.stringify(params, {arrayFormat: 'repeat'}),
    xsrfCookieName: null,
    xsrfHeaderName: null,
});

myAxios.interceptors.request.use(config => {
    if (isURLSameOrigin(config.url)) {
        config.headers.common['X-Requested-With'] = 'XMLHttpRequest';  // needed for `request.is_xhr`
        config.headers.common['X-CSRF-Token'] = document.getElementById('csrf-token').getAttribute('content');
    }
    return config;
});

As far as I can see, there's no way to use the hook with this custom instance. It would be nice if I could simply do const useAxios = makeUseAxios(myAxios); in my project and then use that as the hook.

Hi,
Not providing the trigger: "" parameter will result in the fetch never happening.
From the doc it looks like this should be optional.

Thanks!

This is not working. My request is not sending the data object.

  const { loading, error, response } = useAxios({
    filter: () => sent,
    method: 'POST',
    options: {
      data: {
        prop1: "value",
        prop2: "value2",
      },
    },
    trigger: sent,
    url: "myApiLink"
  });

Demo React 17.
https://codesandbox.io/s/unruffled-rhodes-lfigt

Issue Screenshot

Same demo app when rendered using react 16.x with out any code changes will work.

Version 1.2.0

Just looked at the dist/index.js file and noticed that file contains an extra modules, namely: axios.
I hope, you will also add a source file which I can use as module, w/o additional modules.
Thanks.

I think you can also optimize the code by changing the useState by useReducer and that way you have a cleaner state management.

When updating my dependencies I usually go through all packages in npm outdated and check what changed (always for major version bumps, but depending on the library for minor/feature releases too). Having to check the git commit history for that isn't amazing.

So it would be nice if you provided a changelog, either in the README or in a separate file.

By reading the docs, i cant get how do these two props works. Do they allow to trigger/NOT trigger axios under certain conditions right?