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
2、 Use the in the bag QueryClientProvider
The assembly wraps the whole App
Components , And provide a client
home Components :
Just use it useQusery
The method can .
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 :
Let's expand both
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
Network request :
copyright notice
author[Poker_ Xu],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270106378010.html
The sidebar is recommended
- Spring IOC container loading process
- [thinking] the difference between singleton mode and static method - object-oriented programming
- Hadoop environment setup (MySQL environment configuration)
- 10 minutes, using node JS creates a real-time early warning system for bad weather!
- Git tool
- Force deduction algorithm - 92 Reverse linked list II
- What is the sub problem of dynamic programming?
- C / C + +: static keyword summary
- Idea does not have the artifacts option when configuring Tomcat
- Anaconda can't open it
guess what you like
-
I don't know how to start this
-
Matlab simulation of transportation optimization algorithm based on PSO
-
MySQL slow log optimization
-
[Vue] as the window is stretched (larger, smaller, wider and higher), the text will not be displayed
-
Popular Linux distributions for embedded computing
-
Suzhou computer research
-
After installing SSL Certificate in Windows + tomcat, the domain name request is not successful. Please answer!!
-
Implementation time output and greetings of jQuery instance
-
The 72 year old uncle became popular. Wu Jing and Guo fan made his story into a film, which made countless dreamers blush
-
How to save computer research
Random recommended
- Springboot implements excel import and export, which is easy to use, and poi can be thrown away
- The final examination subjects of a class are mathematical programming, and the scores are sorted and output from high to low
- Two pronged approach, Tsinghua Professor Pro code JDK and hotspot source code notes, one-time learning to understand
- C + + recursive knapsack problem
- The use of GIT and GitHub and the latest git tutorial are easy to understand -- Video notes of crazy God speaking
- PostgreSQL statement query
- Ignition database test
- Context didn't understand why he got a high salary?, Nginxfair principle
- Bootstrap switch switch control user's guide, springcloud actual combat video
- A list that contains only strings. What other search methods can be used except sequential search
- [matlab path planning] multi ant colony algorithm grid map path planning [including GUI source code 650]
- [matlab path planning] improved genetic algorithm grid map path planning [including source code phase 525]
- Iinternet network path management system
- Appium settings app is not running after 5000ms
- Reactnative foundation - 07 (background image, status bar, statusbar)
- Reactnative foundation - 04 (custom rpx)
- If you want an embedded database (H2, hsql or Derby), please put it on the classpath
- When using stm32g070 Hal library, if you want to write to flash, you must perform an erase. If you don't let it, you can't write continuously.
- Linux checks where the software is installed and what files are installed
- SQL statement fuzzy query and time interval filtering
- 69. Sqrt (x) (c + + problem solving version with vs runnable source program)
- Fresh students are about to graduate. Do you choose Java development or big data?
- Java project: OA management system (java + SSM + bootstrap + MySQL + JSP)
- Titanic passenger survival prediction
- Vectorization of deep learning formula
- Configuration and use of private image warehouse of microservice architect docker
- Relearn JavaScript events
- For someone, delete return 1 and return 0
- How does Java dynamically obtain what type of data is passed? It is used to judge whether the data is the same, dynamic data type
- How does the database cow optimize SQL?
- [data structure] chain structure of binary tree (pre order traversal) (middle order traversal) (post order traversal) (sequence traversal)
- Webpack packaging optimization solution
- 5. Operation element
- Detailed explanation of red and black trees
- redhat7. 9 install database 19C
- Blue Bridge Cup notes: (the given elements are not repeated) complete arrangement (arrangement cannot be repeated, arrangement can be repeated)
- Detailed explanation of springboot default package scanning mechanism and @ componentscan specified scanning path
- How to solve the run-time exception of test times
- Detailed explanation of k8s management tool kubectl
- Android system view memory command