Is there a way to get results in other functions? A promise way? A subscribe way?

[frederikhors]

I'm trying to understand how to get results in functions that I neither create nor control.

REPL: https://9crg7.csb.app/#/todos

Code example: https://codesandbox.io/s/urql-how-to-get-update-in-functions-9crg7?file=/List.svelte:266-816

let condition = null;

function updateConditionAndgetTodosHere() {
  const unsubscribe = todos.subscribe((data) => {
    condition = { first: 1 };
    console.log("newData:", data);
    if (data.stale == false && data.fetching == false && data.todos) {
      console.log("data.todos:", data.todos);
      // unsubscribe(); // how to unsubscribe after all?
    }
  });
}

$: todos = query(
  operationStore(
    TODOS_QUERY,
    { input: condition },
    { requestPolicy: "cache-and-network", pause: !condition }
  )
);

I this example I need to console.log(data.todos).

I can't figure out how to handle this.

Screen gif:

The only way I can get todos now is with getClient(), like this:

const queryClient = getClient();

condition = { first: 1 };

const todos = await queryClient
  .query(
    TODOS_QUERY,
    { input: condition },
    // { requestPolicy: "cache-and-network" } // this doesn't work and I can understand why, but it's not good for me, I need cache-and-network here!
    { requestPolicy: "network-only" }
  )
  .toPromise();

if (todos.data) {
  // ok...
}

but I need cache-and-network which getClient() queries can't handle (obviously, obviously?).

How to do this? Where am I wrong?

[kitten]

Yes, using the client imperatively in any binding is recommended if the result is used outside of the normal flow of the UI, i.e. outside of the framework anyway.

I also before I get to a conclusion have to mention that overusing cache-and-Network often does more damage than what it's worth.

Any usage of an imperative method still goes through the usual flow of results, so suppose you have all three options of request policies availed, the usage of cache-and-network doesn't make sense, because there's nothing to update. You will likely always want to use cache-first or network-only imperatively.

When you use cache-and-network imperatively with a promise it obviously won't work since it will only receive the first result. When a query is active however in Svelte (or other bindings), that query will still receive the updated result after a while.

However, there's another reason why it doesn't make sense. The intention of why you have an imperative call is likely because you want to use the result after it's available. Hence, a cache-and-netork updated result wouldn't ever be available to you in an imperative flow, so it's the same as using cache-first. And if your function needs to use a fresh result network-only makes sense.

[kitten]

So you mean suppose the query is on another page and you'd want to imperatively refetch it? You could send off cache-first to get the state and call a network-only operation manually as needed then.

But the point about cache-and-network not working out well with imperative logic still stands 😅

But that's partly because it's not too bad to reproduce the same logic with the promise-based API even.

So you won't need streaks even if you do something like this:

const getResultAndUpdate = async () => {
  const refetch = client.query(...).toPromise();

  const result = client.readQuery(...) || (await refetch);

  // ...
};

where refetch calls client.query with network-only.

[frederikhors]

Wow. I didn't know about client.readQuery(). Thanks.

I updated the REPL here: https://codesandbox.io/s/urql-how-to-get-update-in-functions-forked-3sr58?file=/List.svelte

Gif:

Why is result always null? Even though I have cached elements:

const result = client.readQuery(TODOS_QUERY, { input: pagination });

Example:

const client = getClient();

async function updateConditionAndgetTodosHere() {
  const pagination = { first: 1 };

  const todos = await getResultAndUpdate(pagination);

  if (todos.error) {
    console.log(todos.error.message);
  }

  if (todos.data) {
    console.log(todos.data);
  }
}

const getResultAndUpdate = async (pagination) => {
  const refetch = client
    .query(
      TODOS_QUERY,
      { input: pagination },
      { requestPolicy: "network-only" }
    )
    .toPromise();

  const result = client.readQuery(TODOS_QUERY, { input: pagination });
  console.log("result:", result); // This is always null! Why?

  return result || (await refetch);
};

Every time refetch() is called.

[frederikhors]

UPDATE: Gif added.

[JoviDeCroock]

This seems to be because network-only doesn't write to the cache, changing to cache-and-network did the trick for me.

Source: https://github.com/FormidableLabs/urql/blob/main/exchanges/graphcache/src/cacheExchange.ts#L288

[frederikhors]

WOW! This works! 😃

Can I ask you to marry me, @kitten @JoviDeCroock? 😄

❤️❤️❤️

[frederikhors]

What do you mean by "display cache immediately"?

Forgive me. In my REPL I would like to console.log() the cached todos and simultaneously fetch the new ones.

How can this be done today?