use-fetch-query
v4.0.2
Published
A lightweight hook for making HTTP requests using the fetch API in React
Downloads
13
Maintainers
Readme
use-fetch-query
use-fetch-query
is a lightweight custom hook for making HTTP requests using the fetch API in React applications.
Installation
You can install the package via npm:
npm i use-fetch-query
Usage
import { useQuery } from "use-fetch-query";
function MyComponent() {
const { data, error, isLoading } = useQuery({
method: "GET",
url: "https://api.example.com/data",
});
// Handle loading state
if (isLoading) {
return <div>Loading...</div>;
}
// Handle error
if (error) {
return <div>Error: {error}</div>;
}
// Render data
return (
<div>
<h1>Data:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default MyComponent;
POST request
function App() {
const { data, postData } = useQuery();
useEffect(() => {
console.log(data, "data");
}, [data]);
return (
<div>
<button onClick={() => postData({ hi: "send me" })}>Make a post</button>
</div>
);
}
QueryProvider
The QueryProvider
component is a part of the use-fetch-query
package, providing context for making HTTP requests using the fetch API in React applications.
Usage
import App from "./App";
import React from "react";
import ReactDOM from "react-dom/client";
import { QueryProvider, ClientProviderConfig } from "use-fetch-query";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
const clientConfig = new ClientProviderConfig({
url: "http://localhost",
defaultHeaders: {
name: "Content-Type",
value: "application/json",
},
});
root.render(
<React.StrictMode>
<QueryProvider client={clientConfig}>
<App />
</QueryProvider>
</React.StrictMode>
);
Parameters
method
(string): The HTTP method for the request (default: 'GET').headers
(object): Additional headers to include in the request.body
(object): The request payload.queryParams
(object): Query parameters to append to the URL.url
(string): The URL to which the request will be sent.
Contributing
If you encounter any issues or have suggestions for improvements, feel free to contribute by opening an issue or submitting a pull request on GitHub.