Comments (10)
I think this would really pair well with the fragment-level cache idea that I've now finally written (haha) #85
Edit: @kenwheeler can you outline an RFC or write one, so that anyone could pick up this task? 😛 I'm a little lost on the details here
from urql.
To that sentiment re strict Relay @kitten, I'd like to try this with an AppSync API without strict Relay connection spec, just your run of the mill after cursors :), and it would be nice to not enforce a specific spec, though a default is nice too. Anyways, there's my toonie's-worth, I don't want to interrupt something actually happening with these thoughts :)
from urql.
Sure! It should basically handle pagination out of the box, based on the Relay connection spec. Right now with Apollo Client I have to do the following:
All of that code seems entirely unnecessary. There should be a fetchNextPage
and fetchPreviousPage
out of the box, that load and add items to the end and beginning of a list, respectively, without manual intervention. It could also have specific loading states for these, something like this.props.fetchingNext
and this.props.fetchingPrevious
or whatever.
I think that could end up looking something like this:
<Connect connectionQuery={query(getThreadMessagesQuery, { id })} {/* other <Connect> options here */}>
{({
fetchNextPage,
fetchPreviousPage,
fetchingNext,
fetchingPrevious,
fetching, // This is only true for the first load probably?
...otherConnectParams
}) => /* ...render list here... */}
</Connect>
The cache should also be smart enough to handle these lists. When a user navigates back to a screen they'd previously seen it automatically fetches from the last cursor in the store and adds any new items returned to the end.
Apollo doesn't do this at all, when you navigate back to a thread they just dispatch the original query and overwrites the entirety of the list, even if you had paginated.
Does that make sense?
from urql.
The Relay connection spec is convention of where to put cursors and which arguments to pass depending on which direction you want to go, right? It'd be great if it worked out of the box with that since it's pretty widely used. That being said, you can probably make an abstraction that allows users to reduce the first/last item to arguments for the fetchPage
methods, if that makes sense?
from urql.
Anyways, don't want to introduce a blocker, I would love to see this happen for anything and then see where it could go.
from urql.
Yes please! 😍
from urql.
Sure. Actually, before I take a crack at it, @mxstbr did you have a high level checklist of details you'd like included?
from urql.
Hm, I'm not sure whether it'd make sense to "overload" the render prop's object with so many parameters, but I think this makes a lot of sense otherwise. Maybe we need a flexible description of the fetching logic though. I agree that Relay-style cursors are popular, but sometimes cursors and/or pagination are implemented in subtly different ways, and I'd hate to force a "one true structure" on people. Maybe we can find sth that uses the Relay-style connection cursors by default though?
Regarding the render prop object, maybe we can do:
['nextPage' | 'prevPage']: {
loading: boolean,
error?: CombinedError,
data: T
}
from urql.
Yeah, totally, and fake a PageInfo { hasNext/PreviousPage }?
(Although I'm not quite sure how off the top of my head to fake that in a nice way)
from urql.
Currently there are no plans anymore to implement this as a component. However, there are plans to implement a normalised cache exchange for v1. I'll close this issue for now, but feel free to open new issues with new ideas 👍 I'll leave this with the vague promise: There will be normalised caching 😆
from urql.
Related Issues (20)
- RFC: Add `onCacheHydrated` event
- useQuery re-render even if cached when neighbor data (but not retrieved by useQuery) is newly retrieved HOT 4
- RFC (Graphcache): Change SerializedEntries to provide Map to storage adapters HOT 3
- Component does not suspend when changing variables while using `suspense: true`
- RangeError: Maximum call stack size exceeded when using persistedExchange in front of ssrExchange HOT 7
- Saving a component in Next.js development mode casues infinite requests HOT 1
- Stale || Fetching doesn't actually represent when operations are in progress while offline HOT 5
- storage missing in typed graphcache HOT 3
- Request Policy set to cache-only throws error during build of next.js app with document cache
- request-policy-exchange behavior differs between dev & production HOT 2
- @urql/next registerUrql fails in Next.js app due to TypeError: React.cache is not a function HOT 1
- reexecuteQuery not using new variables HOT 1
- RFC: Consolidating document and normalised caching - safer caching
- [Network] Load failed. Requests are failing on mobile and safari (Safari on both desktop and mobile, and on mobile chrome) HOT 4
- Errors are returned before being able to redirect HOT 2
- useQuery in Nextjs Client Component should be executed from the client side HOT 3
- Passing a `Headers` object results in an error
- Possible memory leak when using multiple queries on the same page HOT 7
- requestPolicyExchange does not re-request in production HOT 3
- cacheExchange - cache.readQuery (updateQuery) can't find queries with aliased variables 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 urql.