urql: Using `graphcache@5.0.0` or 6 the cache in the default storage is not loaded anymore on the first page load
After upgrading from 4 to 5 (or 6) @urql/exchange-graphcache doing some tests with a fake delay on the backend I discovered that when I refresh the page (F5 or Ctrl+R) the cache present in the IndexedDB is not used.
The REPL (with SvelteKit too) is here: https://codesandbox.io/p/sandbox/romantic-feather-xmc826
Steps:
-
the todos are downloaded, showed and stored in the IndexedDB after 3 seconds of fake delay on the server resolver
-
Click on the reload button in the navbar (or the browser’s one)
-
The “Loading listStore…” message appears during the 3 fake delay seconds
-
I expect instead to see the todos immediately (during the
cache-and-networkcall which is still happening)
If I rollback only "@urql/exchange-graphcache" to "4.4.3" this “cold cache” behavior works again.
What could be causing the problem?
Thank you in advance.
Urql version
Validations
- I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
- Read the docs.
- Follow our Code of Conduct
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 24 (22 by maintainers)
6.0.4 doesn’t fix. @kitten is working on a solution: https://github.com/urql-graphql/urql/issues/3093#issuecomment-1528796774.
From https://github.com/urql-graphql/urql/issues/3199:
Describe the bug
I have an issue with duplicated requests (I remove the now deprecated
dedupExchange: I read all CHANGELOGs and announcement issues like https://github.com/urql-graphql/urql/issues/3114).If I use this code:
As you can read in the comments I isolated the issue: if I use the
'cache-first'policy it only send one request.If I use the
requestPolicy: 'cache-and-network'the requests are 2, duplicated, the same ones.If I use the
requestPolicy: 'network-only'the requests are 3 now! Crazy!What am I doing wrong?
Reproduction
This repl is using your modified
graphcacheversion that fixes https://github.com/urql-graphql/urql/issues/3093.REPL: https://codesandbox.io/p/sandbox/issue-urql-6-duplicated-requests-x2y2ub
Steps:
click on “Todos list”
open the browser dev tools
reload the page
the requests are 2!
If you use
network-onlyin the list file the requests are 3 nowUrql version
I upgraded:
I haven’t really looked at this yet since I reckon a resolution will require a larger refactor and changes.
The reason why I believe(d) this is that the description of the issue implies that this is related to a different change where we ensured that the
ssrExchangestill works together with theofflineExchange.This change however was made in
5.0.0: https://github.com/FormidableLabs/urql/pull/2612Also #2945 relates to the replays after hydration , so I don’t see that exactly as responsible, and at most coincidentally changing behaviour.
So, that’s conflicting information to me right now, since I originally assumed that the issue is rather that, while offline or online, the
offlineExchangecurrently does not replay queriy operations after rehydrating the cache from storage.Then again, I’d assume that some of this relates to this check and
failedQueuepush: https://github.com/urql-graphql/urql/blob/8640fdbd5a63c7c1150b82a893924016d63309e7/exchanges/graphcache/src/offlineExchange.ts#L232There we actually do queue failed queries. However, this could’ve only coincidentally made this work in the past, since it’d only work if
onOnlineis calling its callback after it succeeded.Therefore the only logical conclusion is that
flushQueueis called but eitherfailedQueueisn’t properly populated with queries, or it doesn’t attempt to retry them. Another possibility is that the result eventually does come in properly but the initial fallback tocache-onlyis confusing.Anyway, that’s my assumption from before and right now with the updated messages. I can see whether I’ll find time for this in the next 48h-ish or so. That said, the
offlineExchangeis only ~180 very “thin” lines of code without comments, so I can only encourage y’all to look into it and throw in some debugging of your own if you get to it sooner than myself 😇I just forked your codesandbox and tried out 5.0.8, and this problem is still present. So i don’t think that my PR #2945 has anything to do with this. If you go back to 4.4.3 it works just the way you want it to.
I’m seeing the same issue after upgrading to
@urql/exchange-graphcache@6.0.3. In a React Native app, when offline and using thecache-and-networkrequest policy, theofflineExchangedoesn’t return the cached data at all,datais alwaysnull, thoughstaleistrue.Reverting to
@urql/exchange-graphcache@5.0.8resolves the problem, and cached data is returned as expected.Me watching Kitten solve other people’s issues at lightning speed.