🔥 Оформить премиум подписку - htmllessons.ru/premium? Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 150 лайков и я снимаю еще Быстрый курс Если есть какие то фишки по этой теме - дай знать в 💬 комментариях! Скачать 🖥 исходник проекта в нашем хранилище - t.me/redgroupchannel Тайм коды: 00:00 - Что такое React Query? 00:49 - Подключение к проекту 03:38 - Какой сервер будем использовать? 04:11 - Глобальные настройки 06:17 - Где скачать проект? 06:56 - Убираем лишнее и запускаем приложение 07:55 - useQuery 14:03 - TypeScript 15:58 - События onSuccess, onError 18:45 - Трансформация данных (select) 20:04 - Кастомный хук 21:08 - Передать аргумент в useQuery (подгрузка по ID) 26:40 - GET запрос по кнопке "refetch" 28:06 - Devtools 29:37 - useMutation
Ну обычно RTK Query используют в проектах с redux, потому что сразу идёт запись в store. Также у них отличаются стратегии кэширования. Основанная задача RTK Query это тесная связь с Redux
@@REDGroup Завтра поищу тогда уже, const mutation = useMutation((updatedTodo) => axios.put(`localhost:3004/users/${id}`, updatedTodo) ) - но, на json server нет путей таких (/id), там просто localhost:3004/users, и в этом вся проблема
Большое спасибо за видео! А как сделать запрос по data-attribute, например из одного запроса у меня приходят названия, я их маплю, затем по клику на одно из них (беру дата-аттрибутом) отображается нужная информация?
Could not find a declaration file for module 'react-query'. 'E:/Site/React/bren-dim/node_modules/react-query/build/cjs/packages/react-query/src/index.js' implicitly has an 'any' type. Try `npm i --save-dev @types/react-query` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-query' Выполняю команду, но ошибка не устраняется, не компилируется приложение. Может кто подскажет в чем проблема использования с Typescript??
может уде не своевременно но все же) установка пакета сейчас такая npm i @tanstack/react-query . и уникальные ключи в хуке useQuery теперь не строка а массив
🔥 Оформить премиум подписку - htmllessons.ru/premium?
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 150 лайков и я снимаю еще Быстрый курс
Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!
Скачать 🖥 исходник проекта в нашем хранилище - t.me/redgroupchannel
Тайм коды:
00:00 - Что такое React Query?
00:49 - Подключение к проекту
03:38 - Какой сервер будем использовать?
04:11 - Глобальные настройки
06:17 - Где скачать проект?
06:56 - Убираем лишнее и запускаем приложение
07:55 - useQuery
14:03 - TypeScript
15:58 - События onSuccess, onError
18:45 - Трансформация данных (select)
20:04 - Кастомный хук
21:08 - Передать аргумент в useQuery (подгрузка по ID)
26:40 - GET запрос по кнопке "refetch"
28:06 - Devtools
29:37 - useMutation
Спасибо, Макс!! Как всегда, все четко и доходчиво!!
🔥🔥🔥
Красиво
бро какой же топ. Постоянно радуешь контентом, да еще и которым пользуются многие
Спасибо
Топ!!!!
Превосходно
топ
Большое спасибо за урок. Какое ide ты используешь?
Vscode в этом видео
Супер, что освещаешь не только самые популярные темы, у тебя много редкого контента, который не найдешь у других! Спасибо
забыл рассказать про удобную вещь getQueryState
за видео лайк 😉
Redux Toolkit Query какая разница с React Query ?
Ну обычно RTK Query используют в проектах с redux, потому что сразу идёт запись в store. Также у них отличаются стратегии кэширования. Основанная задача RTK Query это тесная связь с Redux
Вот тут можете чекнуть подробно - redux-toolkit.js.org/rtk-query/comparison
@@REDGroup спасибо за ответ
А потом когда ты деплой на реальный хостинг делаешь, как json-server работает, ты же его у себя только на компе глобально установил?
Запускаешь на сервере также через pm2
@@REDGroup От души👍👍👍
Сделай пожалуйста ролик по React native API
А зачем аксиос тут нужен, если можно использовать методы самого квери, такие как queryQey, queryFn (как-то так пишется, но думаю, что понял) ?
Вы не понимаете, изучите доку
Вы не понимаете, изучите доку@@REDGroup
Не могу понять есть ли возможность достать данные из queryCache вне реакт компонента, в каком нибудь API helper файле?
Хуки используются только в JSX файлах, так что полагаю это невозможно.
@@nikaberidze6129вроде нашёл способ экспортировать queryClient и использовать его
А как мне сразу передать, чтобы данные не грузились(enabled:false и к тому же,чтобы не грузились если id какой-то несущественный)?
Да, все верно
Если что, тема - Eva Theme
давай о SWR еще
Честно ни разу не работал с ним, как то сразу с React Query подружился
Кто знает, есть ли такие удобные devtools в RTK Query?
К нему отлично подходит Redux Devtools
Спасибо, а как сделать мутацию, например, одной тудушки из массива тудушек и по новой запросить обновленный список?
Так тяжело написать, посмотрите любую неделю стримов на канале. Как мы делали админ панель или мобильное приложение
@@REDGroup Завтра поищу тогда уже, const mutation = useMutation((updatedTodo) =>
axios.put(`localhost:3004/users/${id}`, updatedTodo)
) - но, на json server нет путей таких (/id), там просто localhost:3004/users, и в этом вся проблема
Вы ключ забыли указать
Большое спасибо за видео! А как сделать запрос по data-attribute, например из одного запроса у меня приходят названия, я их маплю, затем по клику на одно из них (беру дата-аттрибутом) отображается нужная информация?
Не понимаю что значит дата атрибут, в целом Вы уже описали правильные действия
@@REDGroup да я понял что не в атрибуте дело, Вы правы! Просто добавил enable и все заработало! :) еще раз спасибо! React Query.
Could not find a declaration file for module 'react-query'. 'E:/Site/React/bren-dim/node_modules/react-query/build/cjs/packages/react-query/src/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/react-query` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-query'
Выполняю команду, но ошибка не устраняется, не компилируется приложение. Может кто подскажет в чем проблема использования с Typescript??
может уде не своевременно но все же) установка пакета сейчас такая npm i @tanstack/react-query . и уникальные ключи в хуке useQuery теперь не строка а массив