react-query | ️ Hooks for fetching | Frontend Framework library

How do I set up React Router 6 to restore scroll position when I navigate and when the browser window is refreshed?

React Router 5 has a page about scroll restoration, but I can't find anything about scrolling in the docs for v6, so I guess that you're supposed to handle this yourself with another package. Fair enough, but I can't find anything that's compatible with React Router 6.

The packages react-scroll-restoration and oaf-react-router require v5. (oaf-react-router does list that it supports v6, but the basic usage code example isn't compatible with v6, and the related issue #210 is still open.)

Gatsby and Next.js support scroll restoration out of the box, but I doesn't look like there's a neatly packaged package that you can just use.

This little demo app with server side rendered pages does what I want. Scroll position is restored when navigation back and forth and refreshing the browser window.

Here is the same app using React Router 6, where the scroll position isn't saved and restored, but actually reused between pages. The usual workaround for that is to scroll to the top whenever the page is navigated, but I am not interested in that behaviour.

Edit: React Query writes that the issue with scroll restoration is that pages are refetching data, thereby implying that if the data for rendering the pages is there, scroll restoration just works. I cannot confirm that, because my small React Router 6 app has the issue even without doing any data fetching at all. I feel like there is something small think I am missing in order to get it to work.

Rant: I am quite surprised that the typical answer to this issue is to call window.scrollTo(0, 0) when navigating. This only fixes the issue of the scroll position being transferred between pages. When the scroll position isn't restored, the user experience when navigating between pages is seriously deteriorated. I guess this is partly why pop-up windows have become so popular, but they bring a long suite of other UX issues, so I really want to avoid using them.

I am trying to fetch data from firebase but data is shown as undefined, status is successful but data seems not working.

the console.log in fetchstory seems to getting the desired data but I am unable to assign the data to useQuery.

So my example:

I'm playing around with reactQuery in a little demo app you can see in this repo. The app calls this mock API.

I'm stuck on a an issue where I'm using the useQuery hook to call this function in a product API file:

I am planning to add React-slick library into my nextjs project for image slider, but getting an issue

Tries installing "react-slick" and "slick-carousel" as mentioned in the docs by

I need to do the filtering of movies in my component. Initial queries must be all movies. And after I click by button (button name for example historic/сomedy) my data, that I render in my react component must be changed to data from such queries with only history or сomedian movies. How can I realize this in react-query.

I have a custom useMutation hook:

I am using react-query and have a lot of useQuery hooks that accept these parameters:

So the react-query cache is a key-value store but that is sort of limiting no? I thought that it was always best to keep network requests to a minimum since they take orders of magnitude longer than getting data from the cache. That being said, if I have a route /todos as the page for all the todos and a sub route /todos/FE234F32 as the page for some random todo, the query key for all the todos would be ["todos"] and the query key for the specific one would be ["todos", "FE234F32"], then say I visit the page with all the todos first, I would have the data for all the todos in the cache but then if I go to the page for the specific todo it would make a network request because there is no value for ["todos", "FE234F32"].

I understand I could do a getQueryData("todos") inside the query function for ["todos", "FE234F32"] so that I could check if the data is already in the cache but that sort of conditional based solution would make the code look terrible with a larger virtual hierarchy inside the cache. In general, it seems like most state solutions are hierarchical or object-based. but the key-value nature of react-query either causes fetching too much data and selecting down or fetching data that is already in the cache.

I could be completely off base here but I would love some insight/tips!