Examples

[cabljac]

Hey I'd be happy to do some work on this card, I've already had a go using the library with firebase for example.

On a separate note, and maybe this isn't the right place to ask about this, i'd be interested in whether you'd have any suggestions -

i'm trying to write a hook for firebase similar to useSubscription, without use of rxjs or this library (the maintainers of that project don't want to add in more dependencies). In that situation i only have access to firebase's callbacks, e.g:

function onAuthStateChanged(
  auth: Auth,
  nextOrObserver: NextOrObserver<User>,
  error?: ErrorFn,
  completed?: CompleteFn
): Unsubscribe;

I thought to do something similar, and store the unsubscribe methods in the queryClient. Do you think it's necessary to set up a stream, like you do here with rxjs?

(Apologies if it's not so relevant to react-query-subscription)

[kaciakmaciak]

Hi Jacob,

It would be great if you add a firebase example. I've been working on the websocket and event source examples. What I'll do, I'll split the card into multiple issues, so that you can grab whatever suits you.

Regarding your firebase question. Do you need to persist any data in the react query cache? Or is this unrelated? Do you just want to listen to the firebase auth change and update some kind of state?

[kaciakmaciak]

#47

[cabljac]

So we have hooks like useAuthIdToken() which should listen to the auth change and then set query cache, and similar for like, docs changes etc in firestore and rtdb. We ran into some issues with resubscribing when a component is unmounted etc.

I think I achieved what we wanted using your library and rxjs:

import { QueryKey } from "react-query";
import { Auth, IdTokenResult, AuthError } from "firebase/auth";
import { Observable } from "rxjs";
import {
  useSubscription,
  UseSubscriptionOptions,
} from "react-query-subscription";
import { UseSubscriptionResult } from "react-query-subscription/types/use-subscription";

export function idTokenFromAuth(
  auth: Auth,
  options?: {
    forceRefresh?: boolean;
  }
): Observable<IdTokenResult | null> {
  return new Observable<IdTokenResult | null>(function subscribe(subscriber) {
    const unsubscribe = auth.onIdTokenChanged(async (user) => {
      let token: IdTokenResult | null = null;

      if (user) {
        token = await user.getIdTokenResult(options?.forceRefresh);
      }

      subscriber.next(token);
    });
    subscriber.add(unsubscribe);
  });
}

export function useAuthIdToken<R = IdTokenResult | null>(
  key: QueryKey,
  auth: Auth,
  options?: {
    forceRefresh?: boolean;
  },
  useSubscriptionOptions?: Omit<
    UseSubscriptionOptions<IdTokenResult | null, AuthError, R>,
    "queryFn"
  >
): UseSubscriptionResult<R | AuthError> {
  return useSubscription(key, () => idTokenFromAuth(auth, options), {
    ...useSubscriptionOptions,
  }

[kaciakmaciak]

Hi Jacob, I think, I understand your question now. Yes, you will need to store the unsubscribe somewhere so that you can call it when needed (which is when query function is called again or when component is about to unmount). I've achieved this by storing subscriptions in the react query cache, which doesn't necessary need to be done that way.

It's a bit of a bummer that you cannot add more deps into your project. I understand the reasons though, in some cases. I've been using rxfire together with react-query-subscription and rxjs and works like a charm.

Let us know how has your solution been going 🤞

[kaciakmaciak]

And no need to convert the callback into a stream in your case. You will need to update the react query cache in callback instead of subscribing to stream and updating there.

[cabljac]

thanks for your help!