Давайте научимся реагировать на запрос 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, который обеспечивает следующие вещи.

  1. data -> Предоставляет данные с сервера, например: data: [{title: ‘title’}]
  2. isLoading -> Он предоставляет состояние загрузки как логическое и до тех пор, пока наши данные не будут извлечены и в настоящее время находятся в состоянии загрузки.
  3. isError -› если есть какие-либо проблемы при получении данных, ошибка будет предоставлена ​​в состоянии ошибки. еще несколько способов: -
  4. error -> Выдает сообщение об ошибке.
  5. 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, только этот запрос будет извлекать данные, иначе запрос будет отключен.