CodeCraft Kit

Chakra-UI ReactJs Next.JS

@codecraftkit

Documentation

useApiRequest

Description#

The useApiRequest is used to make api calls using a custom api.

Installation#

Code Example

npm i @codecraftkit/use-api-request

Import#

it can be imported from hooks.

Code Example

import { useApiRequest  } from "@codecraftkit/hooks";

or alone.

Code Example

import { useApiRequest } from "@codecraftkit/use-api-request";

Configuration#

To config the apis used in this hooks, look at this example, in the folder _app

Code Example

import Api from '@codecraftkit/api-nextjs'

global['customApi'] = Api({
  url: process.env.NEXT_PUBLIC_API_FEED_URL,
  secret: process.env.NEXT_PUBLIC_API_SECRET,
  tokenKey: process.env.NEXT_PUBLIC_COOKIE_NAME
})

Usage#

This hook allows you to pass and api as an argument, to make fetch request with it

Code Example

const { data, call, loading, error } = useApiRequest(customApi, '/tasks')

This hook automatically sets the token from the cookies when making requests

Another Example#

You can pass an option object as an argument as well

When destructuring the result you can change the item's key names as shown below

Code Example

const {
  data: tasks,
  call: getTasks,
  loading: loadingTasks,
  error: errorTasks
} = useApiRequest(customApi, '/tasks', {method: "POST"})

Arguments#

name

type

required

default

description

api

Api

yes

The custom api where the requests will be made

path

String

yes

The path of the request

options

Object

api custom configuration

defaultValue

String

data default value

verbose

String

Show requests logs in the console

Results#

name

type

description

data

any

Query's response inside the collection field

call

function

Function to execute the query supplied, it receive the query params as arguments

boolean

Request loading state

error

String

Response Error