use-hooks / react-hooks-axios Goto Github PK
View Code? Open in Web Editor NEWCustom React Hooks for Axios.js
License: MIT License
Custom React Hooks for Axios.js
License: MIT License
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
Same demo app when rendered using react 16.x with out any code changes will work.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.