Support for firebase.analytics();

[sigridbra]

Hello!
I'm a new user both with firebase and SWR, but really enjoying the simplicity of this library!
The only trouble I'm facing is that my team wants to use firebase.analytics(); and I do not understand how to access it through the fuego instance.

I have tried to add analytics to the fuego class as described in #59, and then accessing the fuego instance with useFuegoContext. This is not working. Is there any other way to do this?

[nandorojo]

Can you show me your code?

Instead of accessing via context, you can import fuego directly from this lib.

[nandorojo]

I would probably suggest, as we do in the issue you linked, creating your own fuego variable and then just accessing that directly throughout your app.

[sigridbra]

This is how I've added the analytics to the fuego class in fuego.ts.

import firebase from 'firebase/app'

type Config = Parameters<typeof firebase.initializeApp>[0]

export class Fuego {
  public db: ReturnType<firebase.app.App['firestore']>
  public auth: typeof firebase.auth
  public functions: typeof firebase.functions
  public storage: typeof firebase.storage
  public analytics: typeof firebase.analytics
  constructor(config: Config) {
    this.db = !firebase.apps.length
      ? firebase.initializeApp(config).firestore()
      : firebase.app().firestore()
    this.auth = firebase.auth
    this.functions = firebase.functions
    this.storage = firebase.storage
    this.analytics = firebase.analytics
  }
}

It is initialized in the _app as suggested.
Then, in my component I try to use it. I have tested three different approaches.

// 1
import { fuego } from '@nandorojo/swr-firestore' 
fuego.analytics()?.logEvent('browser_type', { type: browserInfo.name })
 
// 2
import {  useFuegoContext } from '@nandorojo/swr-firestore' 
const { fuego } = useFuegoContext();
fuego.analytics()?.logEvent('browser_type', { type: browserInfo.name })

// 3 - this does not even make sense
import { Fuego } from '../fuego';
Fuego.analytics()?.logEvent('browser_type', { type: browserInfo.name })

[nandorojo]

Are you passing an instance of that class to a FuegoProvider?

[sigridbra]

Yep, everything else works perfectly.

import 'bootstrap/dist/css/bootstrap.min.css';
import 'firebase/firestore';
import 'firebase/auth';
import 'firebase/storage';
import { Fuego } from '../components/fuego';

const firebaseConfig = {
  ...
};

const fuego = new Fuego(firebaseConfig);

function MyApp({ Component, pageProps }) {; 

  return (
            <FuegoProvider fuego={fuego}>
              <Component {...pageProps} />
            </FuegoProvider>
  )
}

export default MyApp

[nandorojo]

What if you do fuego.analytics() there?

[nandorojo]

Oh -- you aren't importing Firebase/analytics

[sigridbra]

Well spotted! I completely missed that part and now it is working! Typescript solution:

// 4 - working! 
import { fuego } from '@nandorojo/swr-firestore' 
import { Fuego } from '../fuego';
(fuego as Fuego).analytics()?.logEvent('browser_type', { type: browserInfo.name })

Thank you for your super fast help!

[nandorojo]

Cool!