current position:Home>Simple introduction to react -- the use of usequery (react query) in common hooks

Simple introduction to react -- the use of usequery (react query) in common hooks

2022-01-27 01:06:40 Poker_ Xu

Preface :
In the project , We often need to make requests from the backend , And in function components , If you use it directly axios perhaps fetch Words , The data obtained should be rendered to UI On , Often inconvenient , So we need to introduce react-query, To satisfy us Additions and deletions Basic operation

One 、 Check data :

1、 Guide pack
 Insert picture description here

2、 Use the in the bag QueryClientProvider The assembly wraps the whole App Components , And provide a client

 Insert picture description here
home Components :
Just use it useQusery The method can .
 Insert picture description here
useQusery explain :

  • Parameter one : It's a id, Take whatever you want , But only , This unique key value will be used internally to retrieve data throughout the program 、 Cache and share queries .
  • Parameter two : It's a return one by one Promise Function of

Next, let's take a look at the printed response The result :
 Insert picture description here
Let's expand both
 Insert picture description here

response Objects contain some very important states , You need to pay attention to these states to improve your work efficiency . At any given moment , The query can only be in one of the following states :

  • isLoading perhaps status === ‘loading’ - Query has no data , Getting results
  • isError perhaps status === ‘error’ - The query encountered an error
  • isSuccess perhaps status === ‘success’ - The query is successful , And the data is available
  • isIdle perhaps status === ‘idle’ - Query is disabled

In addition to these main states , Depending on the status of the specific query , More information is available :

  • error - If the query is in isError state , You can use the error Property to get the error
  • data - If the query is in success state , You can use the data Property to get data
  • isFetching - In any other state , If the query is getting ( Including retrieving data in the background ), be isFetching by true

Two 、 increase 、 Delete 、 Change data

 Insert picture description here
Network request :
 Insert picture description here

copyright notice
author[Poker_ Xu],Please bring the original link to reprint, thank you.

Random recommended