React Query Tutorial - 19 - Paginated Queries

Подписаться 648 тыс.

Просмотров 39 тыс.

50% 1

📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
⚡️ Checkout Taskade! www.taskade.com/
To upgrade any workspace, login and visit www.taskade.com/billing
Use coupon code: CodevolutionRU-vid for any workspace upgrade. Select "Add promo code" on checkout, enter the code, then hit "Apply". This will apply a 100% OFF lifetime discount to your subscription. Enjoy and feel free to invite others to your workspace!
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
React Query Tutorial on Paginated Queries
Paginated Queries with React Query

Опубликовано:

19 окт 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@fares.abuali Год назад

Thank you. For your information: Whenever you fetch the data, JSON-server actually returns the total count by default (it has an x-total-count property in the response headers): console.log(data.data); // access your data which is limited to "10" per page console.log(data.headers["x-total-count"]); // length of your data without page limit So instead of hardcoding the number of pages, you can calculate the number of pages by dividing the total count by the limit

@sergeypomidor2379 6 месяцев назад

"colors": [ { "id": 1, "label": "red" }, { "id": 2, "label": "blue" }, { "id": 3, "label": "green" }, { "id": 4, "label": "yellow" }, { "id": 5, "label": "black" }, { "id": 6, "label": "white" }, { "id": 7, "label": "orange" }, { "id": 8, "label": "purple" } ]

@RonyEfendy 2 года назад

The best series of explaining about React Query. Thank you Brother.

@Bukosaure Год назад

You are an incredible teacher. Loving the pace.

@SENPAI-mi6sz 2 года назад

Was waiting for this exact part ty

@alexanonymous5823 Год назад

many thanks to you, this is a very useful react query course

@prakharsahu7145 Год назад

Thank you friend. Your are a savior.

@ajithvs 2 года назад

Does this persist data if the API failed? Suppose using pagination I called results of pages 1 and 2. When I clicked on page 3 I got some error from API. If I use KeepPreviousData flag does this persist the previous API (page 2) data?

@mounis 2 года назад

Nicely explained!

@dorin6027 10 месяцев назад

Bro you have a Bob Ross vibe I love watching your vids lol

@jasemtechno6218 2 года назад

Nice video brother thank you 🌹

@Pareshbpatel 10 месяцев назад

Pagination using pageNo as a parameter in a query along with pageSize using React-Query, very clearly explained. Thanks, Vishwas {2023-09-08}

@mhassankhan8677 Год назад

nice video but I have a question the api I am using does not accept page numbers? I am getting error, what to do in that case?

@MrRahul00712 2 года назад

Its will be good if we wll get a react unit testing tutorial thanks

@Unknown-hx8rp 3 месяца назад

If page=2 doesn't work for you, downgrade the JSON server to version 0.16.3. (April 2024)

@fares.abuali Год назад

Thank you!

@rushabh-dave-2412 6 месяцев назад

We would have also used Shimmer UI to avoid layout shifts,,, however this config option "keepPreviousData" flag also seems feasible.

@user-uy7nq2df8b 5 месяцев назад

How can i implement the same logic using useInfiniteQuery? I need to have not only prev/next page buttons but buttons for each page and i need one query stored in cache that will update depending on what page i clicked.

@kimhwanhoon 11 месяцев назад

Thank you!!

@333ruka Год назад

but how If I dont want full Loading ... UI show instead I want Loading UI in the bottom of the content ?

@RubberDuckCoding 2 года назад

VERY NICE!

@FGA-47 9 месяцев назад

Thanks alot

@user-zd1dt7tz1u 8 месяцев назад

That part at the end with isFetching didn't work for me. Anyone else?

@ekanemeno4565 2 года назад

How do you disabled the 'Next' button once it hits the last page number without hardcoding '4'?

@sachindraragul1094 2 года назад

Usually you will get the no. of pages data from server. using that data you can set it.

@coca6826 Год назад

what the... thank you very very so much

@ahsanabrar880 2 года назад

جزاك اللهُ

@naywinhlaing7574 Год назад

how to diable next button by not fixed data(page===4),Sir?

@fendimohamed340 Год назад

by getting the length of totla data from your request

@najneindustrijaliziraniji 2 года назад

Does anybody here follow original documentation? Their examples are without underscore and that doesn't work. I don't understand why they put useless inputs.

@najneindustrijaliziraniji 2 года назад

Also I can not find limit options in doc... Am I bad with documentation (which is highly possible) or their docs are bad?

@rajeev2127 Год назад

@@najneindustrijaliziraniji Which docs are you searching for? the limit option is a functionality provided by json-server, not the react query.

@notspooky1990 Год назад

The limit feature is from the JSON server. It's a feature included because actual API calls can limit how many items are included on the first page. This is not a feature of React Query. However the limit and page is generally included in actual API calls that have a lot of data.