Давайте научимся реагировать на запрос V4.
React Query часто называют отсутствующей библиотекой для получения данных для React. Тем не менее, с технической точки зрения, это упрощает получение, кэширование, синхронизацию и обновление состояния сервера в ваших приложениях React.
Зачем реагировать на запрос?
-› Реагирующий запрос, как часто говорят, используется для управления состоянием данных сервера, и с использованием реактивного запроса мы должны писать меньше кода, поэтому он также является альтернативой инструментарию сокращения.
Начиная с response-query, нам нужно предоставить поставщика контекста, предоставленного react-query, а затем мы можем использовать хук, предоставляемый react-query. Давайте рассмотрим пример.
В файле app.js настройте следующие способы:
import { useQueryClient, QueryClient, QueryClientProvider, } from '@tanstack/react-query' // Create a client const queryClient = new QueryClient() export function App() { return ( // Provide the client to your App <QueryClientProvider client={queryClient}> //out app goes here...... </QueryClientProvider> ) }
Теперь внутри нашего компонента мы можем получить доступ к данным.
Таким образом, для получения данных в компоненте Products.js
import { useQuery, } from '@tanstack/react-query' import { getProducts } from '../my-api' function Products() { // Queries const {data , isLoading , isError} = useQuery(['products'], getProducts) if(isLoading) return "Loading ..." if(isError) return "Error ..." //then we can assume the data is success return ( <div> <ul> {data?.map(product => ( <li key={product.id}>{product.title}</li> ))} </ul> </div> ) }
Здесь мы предоставили уникальный ключ как «продукты» внутри хука useQuery, который обеспечивает кэширование, и он должен быть уникальным.
Функция getProducts — это функция, основанная на обещаниях, которая возвращает данные в случае успеха и выдает ошибку, если есть какая-либо ошибка.
Здесь мы использовали хук под названием useQuery из react-query, который обеспечивает следующие вещи.
- data -> Предоставляет данные с сервера, например: data: [{title: ‘title’}]
- isLoading -> Он предоставляет состояние загрузки как логическое и до тех пор, пока наши данные не будут извлечены и в настоящее время находятся в состоянии загрузки.
- isError -› если есть какие-либо проблемы при получении данных, ошибка будет предоставлена в состоянии ошибки. еще несколько способов: -
- error -> Выдает сообщение об ошибке.
- isFetching -> после каждой выборки запроса реакции на рендеринг, и isFetching будет истинным, в то время как isLoading будет истинным только во время первоначального рендеринга.
Теперь для публикации данных мы используем хук Next как useMutation.
В компоненте AddProduct ,
import { useQuery, useMutation, useQueryClient, } from '@tanstack/react-query'; const AddProducts = () => { const [data , setData] = useState(''); // Access the client const queryClient = useQueryClient(); const mutation = useMutation(mutationFn , { onSuccess : () => { // Invalidate and refetch queryClient.invalidateQueries(['products'])} } ) return ( <> <input value={data} setData={(e) => setData(e.target.value)} /> <button onClick={mutation.mutate(data)}>Submit</button> </> ) }
Здесь хуки useMutation принимают функцию мутации.
здесь mutate — это функция обратного вызова, которая берет данные и передает их в хук useMutation.
и недействительный запрос будет повторно получать данные или продукты.
Заключение,
React query — самая мощная библиотека для управления состоянием на стороне сервера, а включенное свойство response query впечатляет.
Например,
const params = useParams(); const id = Number(params?.id) const {data} = useQuery([''] , queryFn , { enabled : !!id })
поэтому, если id равен true, только этот запрос будет извлекать данные, иначе запрос будет отключен.