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.6k stars 448 forks source link

Duplicated requests even for older queries using `requestPolicyExchange` with 6.1.5-canary #3319

Closed frederikhors closed 1 year ago

frederikhors commented 1 year ago

Describe the bug

@kitten, as usual I cheered too soon before discovering ONE DIFFERENT PROBLEM probably brother of the other.

Steps:

  1. Start the backend visiting: https://codesandbox.io/p/sandbox/h1pcl

  2. Open the frontend reproduction: https://stackblitz.com/edit/sveltejs-kit-template-default-y5hteh

  3. Go to "List"

  4. Wait for the list to appear

  5. Open browser Dev tools on the "Network" panel

  6. Click on the button "Complete" on one todo

  7. The first call starts and after some seconds it finishes

  8. AND NOW THE NEW PROBLEM (with "6.1.5-canary-7ddccc13" at least):

  9. Another call starts! For every action, even if you click on the "Add more random todos" button.

I'm sad again! :LOL:

Urql version

"devDependencies": {
    "@sveltejs/adapter-auto": "2.1.0",
    "@sveltejs/kit": "1.22.3",
    "@urql/core": "4.0.11",
    "@urql/exchange-request-policy": "1.0.2",
    "@urql/exchange-graphcache": "6.1.5-canary-7ddccc13",
    "@urql/exchange-persisted": "4.0.1",
    "@urql/exchange-retry": "1.2.0",
    "@urql/svelte": "4.0.3",
    "prettier": "^2.8.0",
    "prettier-plugin-svelte": "^2.10.1",
    "svelte": "3.59.2",
    "svelte-check": "3.4.6",
    "svelte-preprocess": "^5.0.4",
    "tslib": "2.6.0",
    "typescript": "5.1.6",
    "vite": "4.4.4"
},

Gif

iss

Validations

frederikhors commented 1 year ago

Sorry. I think it was the requestPolicyExchange which I don't need.

frederikhors commented 1 year ago

I think this deserves your checking, @kitten. Because it is strange what is happening.

Even though I'm using requestPolicyExchange I think it doesn't have to reload queries I'm not calling:

requestPolicyExchange({
  ttl: 1,
  shouldUpgrade: (e) => {
    console.log("test, e:", e);
    return true;
  }
}),
kitten commented 1 year ago

This is expected behaviour. You've set the requestPolicyExchange to ttl: 1, which practically means that every operation will be upgraded to cache-and-network. This in turn means that when the todo list is refreshed after the mutation, its operation is upgraded to cache-and-network

You can even see in the network tab that it's the list query after:

Screenshot 2023-07-20 at 11 46 44 Screenshot 2023-07-20 at 11 46 37

If you increase the TTL, the new request will not be made until the TTL is expired

frederikhors commented 1 year ago

I thought the requestPolicyExchange was only for queries that the user triggers, not for queries that have already finished. In this case the list query is already finished and so I thought it would hang until I call it (and in that case it checks the TTL).

Okay. Now I understand that this exchange operates differently.