feat: optimistic updates

[salmin89]

this will allow trigger onSuccess during revalidation. Let me know what you think

[timdeschryver]

I'm probably missing something but how does this "enable" optimistic updates?

[salmin89]

Here's a recording of what the desired result is. For this gif, I have added an updated field in the data.service, to illustrate that once the api call completes, you will see the real updates.

 delay(1000),
      map((person) => {
        person.updatedAt = Date.now().toString();
        return person;
      })

[timdeschryver]

I think this is "just" a refresh?
Optimistic updates are used when data is being updated and you already want to reflect the changes to the user, without waiting for the server response.
See the docs for react-query https://react-query.tanstack.com/guides/optimistic-updates

[salmin89]

Before this PR, while the data was being revalidated, we didn't have a way to show any previous values.
See the before:
https://cdn.discordapp.com/attachments/962720938774921247/971513436569755688/Kapture_2022-05-04_at_16.45.17.gif

[timdeschryver]

Oh I see, I don't know if optimisticUpdates is the correct name then.
What about preload?
Could you also add a test for this please.

[salmin89]

I’m ok with renaming the setting! Preload sounds a lot like prefetch. But I do like your first suggestion, refresh. Maybe backgroundRefresh?

Should the setting be able to be globally set to a default?

I will add tests and update with new examples once things are decided

[timdeschryver]

Sorry, after giving it some more thought I think we can make this possible without an additional config flag.
The data should be passed to the revalidate method of tapState.
The component code then looks like this if you want to use this future.
Notice the extra if statement because person will be undefined the first time because it isn't in the cache.

  ngOnInit(): void {
    this.queryState.effect(
      this.queryState.data$.pipe(
        tapState({
          onSuccess: (person) => {
            this.model.id = person.id;
            this.model.firstname = person.firstname;
            this.model.lastname = person.lastname;
          },
+          onRevalidate: (person) => {
+            if (person) {
+              this.model.id = person.id;
+              this.model.firstname = person.firstname;
+              this.model.lastname = person.lastname;
+            }
          },
        })
      )
    );
  }

[salmin89]

I mentioned that solution initially on our discord conversation, but I think that the downside of this is that you will have to wire up all your components on both onSuccess, onRevalidate and onError, etc.

What I was thinking is that we can with some configuration set some of these things up so that we get the desired output with less boiler plate need. Like shown in this PR.

Anyone who wants custom handlers for each tap, can have that as well.

but these are just thoughts. I don’t think strongly about one over the other, so I’ll leave it up to you to decide :)