urql-graphql / urql

The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
https://urql.dev/goto/docs
MIT License
8.65k stars 454 forks source link

Multiple duplicated requests using `cache-and-network` or `netowrk-only` #3199

Closed frederikhors closed 1 year ago

frederikhors commented 1 year ago

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:

import { getContextClient, queryStore } from '@urql/svelte';

const currentPlayerStore = queryStore({
  client: getContextClient(),
  query: CurrentPlayerDocument,
  // the default requestPolicy is 'cache-first' // one request only, ok
  // requestPolicy: 'cache-and-network', // two requests, duplicated
  // requestPolicy: 'network-only' // THREE requests! Duplicated!
});

$: currentPlayer = $currentPlayerStore.data?.currentPlayer;

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 graphcache version that fixes https://github.com/urql-graphql/urql/issues/3093.

REPL: https://x2y2ub-5173.csb.app/todos

Steps:

  1. click on "Todos list"

  2. open the browser dev tools

  3. reload the page

  4. the requests are 2!

  5. If you use network-only in the list file the requests are 3 now

Urql version

I upgraded:

"devDependencies": {        
  "@graphql-codegen/cli": "3.3.1",
  "@graphql-codegen/typed-document-node": "4.0.1",
  "@graphql-codegen/typescript": "3.0.4", 
- "@urql/core": "2.6.1",  
+ "@urql/core": "4.0.7",  
  "@urql/devtools": "2.0.3",
- "@urql/exchange-graphcache": "4.4.3", 
+ "@urql/exchange-graphcache": "6.0.4", 
- "@urql/exchange-persisted-fetch": "1.3.4",  
+ "@urql/exchange-persisted": "4.0.0",
- "@urql/exchange-retry": "0.3.3",    
+ "@urql/exchange-retry": "1.1.1",    
- "@urql/svelte": "2.0.2",    
+ "@urql/svelte": "4.0.1",
- "graphql": "16.6.0",  
- "graphql-web-lite": "16.1.1000",
},

Validations

frederikhors commented 1 year ago

Added REPL.

kitten commented 1 year ago

Can you at least narrow this down first please to either the canary Graphcache release or something else?

It's likely that this is because of Graphcache rebounding the requests now during hydration.

Also, my usual note, as per other issues, There's many notes on this use-case not being recommended. There's almost no point in caching if you issue a request on every single load anyway.

frederikhors commented 1 year ago

Can you at least narrow this down first please to either the canary Graphcache release or something else?

Sorry, I wasn't clear enough: after fixing https://github.com/urql-graphql/urql/issues/3093 I thought the duplicate requests were cause of the update, instead they are the result of changes in graphcache to fix https://github.com/urql-graphql/urql/issues/3093.

There's many notes on this use-case not being recommended

What usecase? I'm curious, because I could be using it wrong as I use it now. Can you please better explain?

There's almost no point in caching if you issue a request on every single load anyway.

This is just an example to narrow down a simple bug reproduction.

kitten commented 1 year ago

Alright, closing this then in favour of #3093 since it doesn't affect a published, stable version