Observables support

[mateja176]

Similar to:

• https://github.com/LeetCode-OpenSource/rxjs-hooks
• https://github.com/crimx/observable-hooks

This would be especially useful with libraries like rxfire

This ties into web socket (or similar), server subscriptions.

If you're not convinced consider the popularity of rxjs.

[sergiodxa]

How would you use SWR with Observables? Do you want support in the fetcher or as a way to get the data?

[shuding]

I've been thinking about this too. (but I don't have a clear way in mind to do that). 🤔

const { data } = useSWRSubscription('key', (onData, onError) => {
  const starCountRef = firebase.database().ref('posts/1/starCount')
  starCountRef.on('value', function(snapshot) {
    onData(snapshot.val())
  })
  return () => starCountRef.off()
}

But there're a lot of challenges, and it doesn't seem to have any benefits of useSWR. For example it can't focus revalidate.

[sergiodxa]

Maybe an API like that should be used together with useSWR, as a way to mutate the cache and not to get the data directly, this way you can subscribe to WebSockets or GraphQL subscriptions there and get new values, but you still get the normal SWR features like in focus revalidation.

[sergiodxa]

What do you think of an API like this one:

const { data } = useSWR("/api/messages", fetcher, {
  subscribe(key, mutate) {
    const unsubscribe = ws.subscribe(key, (newMessage) =>
      mutate((currentMessages) => currentMessage.concat(newMessage))
    );
    return unsubscribe;
  },
});

The new option subscribe is a function receiving the key and the bound mutate, here it starts the subscription and update the cache when there is a new value, and it returns a function to unsubscribe when the component unmount.

[sergiodxa]

Here's an example using this proposed API to get the Geolocation

function fetcher() {
  return new Promise((resolve, reject) =>
    navigator.geolocation.getCurrentPosition(resolve, reject)
  );
}

const { data } = useSWR("geolocation", fetcher, {
  subscribe(_, mutate) {
    const id = navigator.geolocation.watchPosition(mutate);
    return () => navigator.geolocation.clearWatch(id);
  },
});

In the fetcher we read it directly with navigator.geolocation.getCurrentPosition and in the subscribe will use navigator.geolocation.watchPosition to get updates and mutate the cached value.

This is actually similar to using an effect after the useSWR call to subscribe to changes and mutate the cache.

[pke]

@sergiodxa is this actually implemented yet, I can't seem to find it in the docs?

[sergiodxa]

I sent a PR, it was never merged I a think, I don’t remember and I don’t use SWR anymore.

[huozhi]

We had few concerns about the usage of subscription and wann collect more feedbacks from community about the scenarios of using SWR with observable cases. so it's not landed yet. We wanna make it decouple from swr core but covering more observable/subscription patterns.

Theres's a subscription RFC in the discssuion. Feel free to post the use cases you need or what you have today and want to work with swr later.