React Query — Множество извиквания на API

Реагиране на заявка

Той действа като мениджър на извиквания на API, Backend може да е всичко, но това ще ни помогне да извлечем, кешираме и актуализираме данни във вашите приложения за реагиране, без да докосваме никакво „глобално състояние“.

React Query следва структура, подобна на GraphQL, където заявката е за извличане на данните и мутация за актуализиране на данните. По този начин се запознаваме с функционалностите и използването на graphQL. За магазина можете да използвате Apollo Store или Context API или Redux. Но redux прави приложението сложно отгоре на това, трябва да използваме Redux thunk за асинхронни операции.

Защо React Query е добър за асинхронни API извиквания:

• Автоматично кеширане
• Може да изпълнява няколко паралелни заявки едновременно
• Лесен за работа с всички видове API като REST, GraphQL, Promises и др
• Многослоен кеш + автоматично събиране на отпадъци
• Повторно извличане — Автоматично се оттегля за 3 пъти, преди грешката да се покаже в потребителския интерфейс
• API разговорите ще бъдат организирани. Увеличава четливостта.
• Получаване на REST API данни в структуриран формат като данни, грешка, състояние, isLoading и може да бъде достъпен директно в частта за изобразяване.
• Има Devtools за отстраняване на грешки. ще бъде лесно да идентифицирате проблемите.
• Това ще намали използването на useState кука. можем директно да осъществим достъп до API данните const { data } = useQuery("posts", usePosts); в частта за изобразяване.
• Load-More + Infinite Scroll Queries и много други

Реагиране на кеширане на заявки

async function usePosts() {
    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    return data;
}
const { status, data, error, isFetching, isLoading } 
= useQuery("posts", usePosts);

Това е простият пример за React Query и как се използва. След като данните се заредят от API. Той ще бъде съхранен в кеша (кешът по подразбиране има 5 минути изтичане и може да се конфигурира). За следващите заявки данните ще бъдат заредени от кеша. За всяко повикване едновременно ще се направи извикване на API, ако данните бъдат променени, тогава ще се актуализира кеша и ще се отрази на потребителския интерфейс. Нищо няма да се случи, ако данните са еднакви.

• данни — връща REST API данни
• грешка — всяка грешка, възникнала по време на заявката
• статус — статус на заявката
• isLoading — заявка за първи път и чакане на отговор от сървъра
• isFetching — Опресняване на кеша от задната част / повторно извличане на отговора за актуализиране на кеша.

По подразбиране „неактивните“ заявки се събират за боклук след 5 минути.

Заявките, които са неуспешни, се опитват безшумно повторно 3 пъти, с експоненциално забавяне на забавянето, преди да се улови и покаже грешка в потребителския интерфейс.

Заявка — Извличане

async function usePosts() {
    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    return data;
}
const { status, data, error, isFetching, isLoading } = useQuery("posts", usePosts);

Мутация — Актуализиране

async function createPost(params) {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', params)
    setMessage(response.data)
}
const { mutate, isLoading } = useMutation(createPost, {
  onSuccess: data => {
    console.log(data);
  },
  onError: () => {
    alert("there was an error")
  },
});
const onSubmit = (params) => {
    mutate(params);
};

За Devtools трябва да добавите следния компонент

<ReactQueryDevtools initialIsOpen />

Първоначалният компонент трябва да бъде обвит с, за да получите функционалността на заявката за реакция в дъщерните компоненти. QueryClient се използва за взаимодействие с кеш данните. Той може да бъде достъпен в дъщерните компоненти чрез кука useQueryClient.

<QueryClientProvider client={queryClient}> 
     // Child components
</QueryClientProvider>

Ако харесвате тази статия. щракнете върху бутона за аплодисменти! 👏 Последвайте ме в Github, Twitter, Facebook.

Справка: