react-fetching-query v0.5.4

Getting started

This library adds a dynamic context of a query. And a transition during request and fetching.

Installation

Run the following

npm install react-fetching-query

Usage

Firstly you need to follow the instructions That's it. You can use react-fetching-library as you normally would. And also you can do the following.

You have a standart action

const getUserInfo: Action<{
	id: number
	name: string
}> = {
	method: "GET",
	endpoint: "/user/info",
}

Then you use QueryProvider to provide a QueryContext to its children

function TopBar() {
	return (
		<QueryProvider action={getUserInfo}>
			<User />
			{/* ... */}
		</QueryProvider>
	)
}

Then you use this context with useQueryContext

function User() {
	const { payload } = useQueryContext()
	return (
		<div>
			<h2>ID: {payload.id}</h2>
			<h2>Name: {payload.name}</h2>
		</div>
	)
}

When using typescript

const { payload } = useQueryContext<typeof getUserInfo>()
// Or with nulish parameter which makes 'getUserInfo' Optional.
const { payload } = useQueryContext<typeof getUserInfo, null>()

Transformation

You can use your own components for handling loading and errors. You will have to add QueryTransform to change the default Transformation.

However you will be able to change it locally