Nuxt•4mo ago

Trying to dynamically provide an API services composable

Hey ninjas, I came through creating an API service that loads firebase or restful API. I made it as a composable and it might be my fault because it is not working properly in the root of composables directory, here is the setup:

import { useApiServiceStore } from '~/store/api-service'
import { initFirebaseApi } from '~/composables/firebase'
import { initRestApi } from '~/composables/rest'

export function useApiServices() {
  const { isFirebase, isRest } = useApiServiceStore()
  const firebaseApi = () => initFirebaseApi()
  const restApi = () => initRestApi()

  return isFirebase ? firebaseApi : restApi
}

import { useApiServiceStore } from '~/store/api-service'
import { initFirebaseApi } from '~/composables/firebase'
import { initRestApi } from '~/composables/rest'

export function useApiServices() {
  const { isFirebase, isRest } = useApiServiceStore()
  const firebaseApi = () => initFirebaseApi()
  const restApi = () => initRestApi()

  return isFirebase ? firebaseApi : restApi
}

The idea I came up with is to use store parameters enabling the admin to choose the desired API service, what I've noticed is that it is not loading all the composable, or the IDE cannot see the definitions since I am using typescript. any insights will be appreciated 🙂

12 Replies

Flo•4mo ago

put it in server/utils and you should be good 🙂

Nasr galal•3mo ago

Will try it, thanks for the heads up 🙂 @Flo I got issues because it is not supported to use or call composables outside any nuxt defined context/hook. I think I have an issue with my approach as a higher level arc. Let me share with you the inputs I have and see. So, for firebase, I have to consume the composables SDK, for example (a logout function):

import firebaseAuth from './somewhere.ts'

const logout = async () => {
    try {
      await signOutFromFirebase(firebaseAuth)
      await signOut({ callbackUrl: '/auth/signin', external: true })
    } catch (error) {
      console.error('composables/firebase/auth/logout ERROR => ', error)
    }
  }

import firebaseAuth from './somewhere.ts'

const logout = async () => {
    try {
      await signOutFromFirebase(firebaseAuth)
      await signOut({ callbackUrl: '/auth/signin', external: true })
    } catch (error) {
      console.error('composables/firebase/auth/logout ERROR => ', error)
    }
  }

when I put that function in a composable, then call it from a parent, typescript shouts 😄

Flo•3mo ago

Composables only work on pages/components, not in server stuff

Nasr galal•3mo ago

yeah you are right

Flo•3mo ago

Need to say, I have no clue about firebase

Nasr galal•3mo ago

no worries 🙂 appreciate your responses though 🙂

Flo•3mo ago

looks like you're doing some kind of oauth flow?

Nasr galal•3mo ago

That's a perfect vision! ♥ I was trying to create a POC to put mix of stuff together to work in a rythm. Using @sidebase/nuxt-auth alongside with the backend service could be a cool thing. So my imagination sees the following: 1. Setting up auth middlewares 2. add Rest API service 3. add cloud/serverless service I know it might look a crazything 😄 I was thinking of providing multiple API services to choose from or to work in parallel, but it looks complex a bit as it needs some engineering the current issue is that typescript gets confused when nesting composables and recalling them, let's say:

const {loaderFunction} = useApiService()
const {someComposable} = loaderFunction()
// typescript cannot see someComposable

const {loaderFunction} = useApiService()
const {someComposable} = loaderFunction()
// typescript cannot see someComposable

Flo•3mo ago

I'm actually using sidebase/nuxt-auth with no issues straightforward following the docs

Nasr galal•3mo ago

Me too, I am using 'local' auth type and it works really well with any API, tried it with firebase, strapi, github and more

Flo•3mo ago

We're doing a combination of keycloak and local auth, local for developers

Nasr galal•3mo ago

interesting Yes, I needed to unite the API interfaces, Rest methods and Firebase methods should have name naming 🙂 it really took time for me to understand it fully. May be because it is my first time getting my hands dirty doing it 🙂

Gaming

Programming

Trying to dynamically provide an API services composable