How to Prevent Unnecessary Query Execution After Update in Urql

[shungenie]

Hi all

I am currently working on implementing an edit screen. The issue I am facing is that when I execute the executeUpdateFoo, the Foo query is also being executed. This is not desirable for us, as the Foo query has a relatively long execution time on the API.

While this long-running query is being executed, the page navigation in Next.js can cause a context canceled error on the Go language API side.

To mitigate this problem, I have tried setting the requestPolicy to cache-only to prevent the Foo query from being executed, but it is still being executed.

Is there a way to prevent the execution of the query after the update? I would appreciate any guidance you can provide.

Thank you in advance.

query Foo($id: ID!) {
  node(id: $id) {
    ... on Foo {
      id
      name
      var {
        id
        foovar {
          id
          name
        }
        varfoos {
          id
          name
        }
      }
    }
  }

mutation UpdateFoo($input: UpdateFooInput!) {
  updateFoo(input: $input) {
    foo {
      id
    }
  }
}

const [updateFooResult, executeUpdateFoo] =
    useUpdateFoo();

const handleUpdateFoo = async (
    input: UpdateFooInput,
  ) => {
    const res = await executeUpdateFoo(
      { input },
      { requestPolicy: "cache-only" },
    );
    if (res.error === undefined) {
      return router.push(`/foor/${fooId}`);
    } else {
      console.log(“fail”);
    }
  };

I have already read #3465