useGet

Introduction

The useGet hook is a custom React Hook that facilitates GET requests and handles the loading state and errors for such requests. It is particularly useful when you need to retrieve data from a server or API using GET requests and want to handle the loading and error states in your React components efficiently.

Usage

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

const TestUseGet = () => {
  const { res, isLoading, err } = useGet("http://localhost:3001", {
    // config
  });

  return (
    <>
      <div>isLoading: {isLoading ? "true" : "false"}</div>
      {err ? <div>Error: {err.message}</div> : <div>no error</div>}
      <div>res: {res ? res.data : ""}</div>
    </>
  );
};

export default TestUseGet;

Return Value

The hook returns an object containing the following properties:

Name	Type	Description
res	ResponseData | null	The response data from the GET 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 from which the GET request will be sent.
config	ExtendedRequestOptions (optional)	Additional configuration for the GET 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

• Facilitates GET requests in React components, simplifying the process of fetching data from a server or API.
• Automatically handles the loading state, allowing you to display a loading indicator while the GET request is ongoing.
• Provides an error object to handle and display any errors that occur during the GET request.
• Can be customized using the optional config parameter to add additional headers, set a timeout, or handle request retries.

Example

In the TestUseGet component, we use the useGet hook to make a GET request to the URL ”http://localhost:3001”. The useGet hook handles the GET 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 GET request. If the request is still loading, it displays “isLoading: true”. If there’s an error, it displays an error message with the error’s message. If the request is successful (res is not null), it displays the response data (res.data).

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

Use Scenario

The useGet hook is useful in scenarios where you need to perform GET requests in a React component and handle the loading and error states associated with those requests. It allows you to interact with APIs or servers to retrieve data while maintaining a smooth user experience by displaying loading indicators and handling errors gracefully.