Comments (9)
I think got rid of the exceptions by changing the swrDataToOffset
function to return pages.length
instead of pages.length - 1
. But now after loading more data after SWR displays the cached data, I get the last page again. I'll try to create a simplified version of our component for an example.
One more thing: is there a way for a page to tell that there will be no more data available (so I could hide the element triggering a fetch)? Now I get more and more pages even if they are empty. Returning null
from the page component doesn't seem to have an effect.
from swr.
Great! Never had the chance to return to my SWR experiments. I'll see what I can achieve with v0.1.7 when I have my other project tasks done.
from swr.
Hi @grazianodev !
I noticed the exact same bug as you had, and already created a PR to fix it (there's also an example): #95
We will review and ship it today in the next version, will let you know!
from swr.
Hi @roxeteer !
I think we'll need a second parameter like pageCount
or pageSWRs
, for the function swrDataToOffset
, because that function shouldn't depend on any state outside for performance considerations. So ideally you'll have:
(data, pageSWRs) => pageSWRs.length
as your swrDataToOffset
function.
Regarding
One more thing: is there a way for a page to tell that there will be no more data available
There's a isReachingEnd
value also returned from useSWRPages
. If your swrDataToOffset
returns null
, it will be considered as the last page:
const { isReachingEnd } = useSWRPages(
...,
...,
(data, pageSWRs) => {
if (!data.hasNextPage) return null
return pageSWRs.length
}
)
You can conditionally return null
based on the data returned from the API.
from swr.
👋 this feature has landed in [email protected]
, here's an example:
https://codesandbox.io/s/swr-playground-946db
Closing this issue now.
from swr.
Hi,
thank you for your efforts, however it seems like something's not working well, even in the example you posted on CodeSandbox. If I click the 'load next page' button a few times you get the following, which is correct:
content of page 0
content of page 1
content of page 2
content of page 3
content of page 4
However if I switch to another tab or window and return to CodeSandbox, this is what I see:
content of page 0
content of page 5
content of page 5
content of page 5
content of page 5
I've implemented the example working with a real API and I see the error again: I get the data just fine initially, but if I switch tab or window and go back, suddenly the original data is replaced with repeated content from the same page. Basically, it behaves as described above. Restoring the scrolling position doesn't seem to work either: if from page A (where I fetch my data) I scroll 400px, then I visit page B and scroll e.g. 200px, and then go back to page A via the back button, I would expect to be at 400px from the top but I'm actually at 200px (in other words, it applies to page A the last scrolling position of page B).
I really like the potential of this library so it would be great if I could get this working! Please note that I'm not a very experienced developer so I might be doing something wrong or missing something. Thank you for any help!
from swr.
We just shipped the improvements in [email protected]
, it has a much simpler interface now. You can take a look at an example here:
https://github.com/zeit/swr/blob/master/examples/pagination/pages/page-index.js
from swr.
Thank you for your work!
I have made some tests with the new version and the bug I described earlier is definitely gone. However I still have some issues with restoring the scrolling position.
I am currently testing with a frontend that makes an API request to fetch a list of posts from a backend that uses a Wordpress installation. When I visit the page of a single post from the homepage (where the list of posts is), then hit the back button to return to the homepage, the SWR library requests the lists of posts again (to revalidate the data, I imagine), which takes some time; but the scrolling position is restored immediately, so what happens is that the restoration is done when I'm still on the single page, causing a jump in this page before returning to the homepage, which is a bit nasty. Another issue I've noticed with scrolling is that if I've scrolled 3000px on the homepage, and visit a single post page that is 2000px tall, then hit the back button, the restoration of the scrolling position is not precise; on the contrary, if the single page is taller than what I've initially scrolled it is always correct. (Just pointing it out, I'm not even sure if this being super precise is within the scope of SWR).
I do have one more question. In this use case (just retrieving a set of posts) I don't really need to revalidate the data, so is there a way to just fetch the cached posts without revalidating when I return to the homepage? (I guess this would conveniently also solve the first scrolling issue since, with no revalidation requests, hitting the back button would immediately bring me back to the homepage).
from swr.
@grazianodev is this a client side transition (e.g.: history.pop
)?
then hit the back button to return to the homepage
If not, SWR cannot reuse the cache (since it's in the memory) and restore the list unfortunately.
I don't really need to revalidate the data
Yeah we plan to provide that option 👍
from swr.
Related Issues (20)
- useSWR seems to trigger suspense boundaries even if not using suspense mode HOT 5
- Type error when overriding global fetcher function with null HOT 3
- SWR mutate does not trigger even if I have a hook mounted with the same key HOT 1
- fallback doesn't work with `useSWRInfinite` and next app router HOT 1
- Type error when fallback option with undefined.
- Repeat render
- useSWRMutation - Type error: Expected 2-3 arguments, but got 1. HOT 1
- Cannot read properties of null (reading 'useSyncExternalStore') HOT 1
- Optimistic update with useSWRMutation HOT 2
- typescript is incorrect when using different fetchers but the same key HOT 3
- Type safe Key as Url for the SWR fetcher
- Unexpected `revalidateIfStale = false` initial load behavior on key change HOT 1
- useSWR('key', fetcher) calls fetcher non-deterministically even when `key` is in the fallback
- Can I call both of onSuccess function in trigger options and useSWRMutation options?
- Fetcher isn't run again when error boundary resets using Suspense. HOT 1
- SWR should assert the data not be undefined if `isLoading` is false and `error` is null HOT 1
- Clarification Needed on Handling data for Optimistic Updates in useSWRMutation
- swr repeated render problem
- "isLoading" always true after clear the cache HOT 1
- Missing export of type `SWRInfiniteMutatorOptions` starting from 2.2.5 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swr.