usePatch

Introduction

The usePatch hook is a custom React Hook that simplifies the process of making PATCH requests and handling loading and errors. It is particularly useful when you need to update data on a server or API using the HTTP PATCH method and want to manage the loading and error states in your React components efficiently.

Usage

import React from "react";
import { usePatch } from "@cannonui/reacthooks";

const TestUsePatch = () => {
  const { res, err, isLoading } = usePatch("http://localhost:3001/endpoint", {
    // config
  });

  return (
    <div>
      <div>Loading: {isLoading ? "true" : "false"}</div>
      {err ? <pre>{JSON.stringify(err, null, 2)}</pre> : <div>no error</div>}
      <div>res: {res ? res.data : ""}</div>
    </div>
  );
};
export default TestUsePatch;

Server Mockup using Express

Here’s an example of how you can set up a server mockup using Express to handle the PATCH request:

const express = require("express");
const app = express();
const bodyParser = require("body-parser");

// Middleware to parse incoming JSON data
app.use(bodyParser.json());

// PATCH endpoint to handle the request
app.patch("/endpoint", (req, res) => {
  // Your server-side logic here to handle the PATCH request
  // For this mockup, we simply send a success response
  res.status(200).json({ message: "Data updated successfully!" });
});

// Start the server on port 3001
app.listen(3001, () => {
  console.log("Server is running on http://localhost:3001");
});

Return Value

The usePatch hook returns an object containing the following properties:

Name	Type	Description
res	ResponseData | null	The response data from the PATCH request, if any.
isLoading	boolean	A boolean indicating whether the request is loading.
err	Error | null	The error object in case of an error, if any.

Parameters

Name	Type	Description
url	string	The URL to which the PATCH request will be sent.
config	ExtendedRequestOptions (optional)	Additional configuration for the PATCH request.

Extended Request Options

The config parameter of the useGet hook allows you to customize the behavior of the GET request using the following properties:

Name	Type	Description
debounce(optional)	number	The time in milliseconds to wait before sending the request after the last trigger. Defaults to undefined.
polling(not available yet)	number	The interval in milliseconds between periodic GET requests. Allows periodic polling for updated data. Defaults to undefined.
tabular	TabularFormat (optional)	An optional object specifying the format of tabular data if your API returns data in a tabular format.
params(optional)	Record<string, string | number>	Additional parameters to be sent along with the GET request. Used for pagination or filtering.
data(optional)	any	Data to be sent as the request body. Useful for sending data in POST requests. Defaults to undefined.
files(optional)	File[] (optional)	An array of File objects representing files to be uploaded in a file upload request.
isFormData(optional)	boolean	A flag indicating whether the request body is of type FormData. Defaults to false.
timeout(optional)	number	The timeout duration in milliseconds for the GET request. If the request takes longer, it will be aborted. Defaults to undefined.
offline(not available yet)	boolean (optional)	A flag to indicate whether to store and serve the request from cache when the device is offline. Defaults to false.
onDataChunk(optional)	(chunk: ReadableStreamReadResult<any>)	A function to process chunks of data as they arrive when using streaming responses. Defaults to undefined.
onBefore(optional)	Array<(params: ExtendedRequestOptions) => any>	An array of functions to be executed before sending the GET request. Defaults to an empty array.
onSuccess(optional)	Array<(data: any, params: ExtendedRequestOptions) => any>	An array of functions to be executed when the GET request is successful. Defaults to an empty array.
onError(optional)	(error: Error)	A function to be executed when an error occurs during the GET request. Defaults to undefined.
onFinally(optional)	(params: ExtendedRequestOptions, data: any, error: any) => void	A function to be executed after the GET request is completed, regardless of success or error. Defaults to undefined.
maxRetry(optional)	number (optional)	The maximum number of times to retry the GET request in case of network errors. Defaults to undefined.
body(optional)	BodyInit | null	The request body to be sent with the GET request. Can be null.
cache(optional)	RequestCache	A string indicating how the request will interact with the browser’s cache to set request’s cache.
credentials (optional)	RequestCredentials	A string indicating whether credentials will be sent with the request always, never, or only when sent to a same-origin URL. Sets request’s credentials.
headers (optional)	HeadersInit	A Headers object, an object literal, or an array of two-item arrays to set request’s headers.
integrity(optional)	string	A cryptographic hash of the resource to be fetched by request. Sets request’s integrity.
keepalive(optional)	boolean	A boolean to set request’s keepalive.
method (optional)	string	A string to set request’s method.
mode (optional)	RequestMode	A string to indicate whether the request will use CORS, or will be restricted to same-origin URLs. Sets request’s mode.
redirect(optional)	RequestRedirect	A string indicating whether request follows redirects, results in an error upon encountering a redirect, or returns the redirect (in an opaque fashion). Sets request’s redirect.
referrer(optional)	string	A string whose value is a same-origin URL, “about ”, or the empty string, to set request’s referrer.
referrerPolicy(optional)	ReferrerPolicy	A referrer policy to set request’s referrerPolicy.
signal (optional)	AbortSignal | null	An AbortSignal to set request’s signal.
window (optional)	null	Can only be null. Used to disassociate request from any Window.

Features

• Simplifies making PATCH requests in React components, making it easy to update data on servers or APIs.
• Automatically handles the loading state, allowing you to display a loading indicator while the PATCH request is ongoing.
• Provides an error object to handle and display any errors that occur during the PATCH request.
• Can be customized using the optional config parameter to add additional headers, set a timeout, or handle request retries.

Example

In the TestUsePatch component, we use the usePatch hook to make a PATCH request to the URL ”http://localhost:3001/endpoint”. The usePatch hook handles the PATCH request and provides the res, isLoading, and err values to manage the loading and error states.

The component conditionally renders different content based on the state of the PATCH request. If the request is still loading, it displays “Loading: true”. If there’s an error, it displays the error object in a preformatted JSON format. If the request is successful (res is not null), it displays the response data (res.data).

You can use the TestUsePatch component in your application whenever you need to handle PATCH requests to update data on a server or API, and it will automatically manage the loading and error states, providing a smooth user experience.

Use Scenario

The usePatch hook is useful in scenarios where you need to update data on a server or API using the PATCH method in a React component. It allows you to interact with APIs or servers to modify existing data while maintaining a smooth user experience by displaying loading indicators and handling errors gracefully.