N
Nuxtβ€’2mo ago
Nasr galal

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
Floβ€’2mo ago
put it in server/utils and you should be good πŸ™‚
Nasr galal
Nasr galalβ€’4w 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
Floβ€’4w ago
Composables only work on pages/components, not in server stuff
Nasr galal
Nasr galalβ€’4w ago
yeah you are right
Flo
Floβ€’4w ago
Need to say, I have no clue about firebase
Nasr galal
Nasr galalβ€’4w ago
no worries πŸ™‚ appreciate your responses though πŸ™‚
Flo
Floβ€’4w ago
looks like you're doing some kind of oauth flow?
Nasr galal
Nasr galalβ€’4w 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
Floβ€’4w ago
I'm actually using sidebase/nuxt-auth with no issues straightforward following the docs
Nasr galal
Nasr galalβ€’4w 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
Floβ€’4w ago
We're doing a combination of keycloak and local auth, local for developers
Nasr galal
Nasr galalβ€’4w 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 πŸ™‚
Want results from more Discord servers?
Add your server
More Posts
Need help ignoring shiki highlight hints in a copy buttonIn Nuxt content, you can use Shiki to highlight code blocks, and you can highlight these blocks withNeed help with Nuxt Image - I want to be able to use IPX but rename the fileHey I'm trying to rename the saved images files with IPX but can't figure it out, would appreciate aNeed some help about useFetch usageHello friends, anyone knows why a useFetch would trigger once on the client although the getCachedDaSyntaxError: The requested module 'playground/node_modules/ufo/dist/index.mjs' does not provide an eGetting this error when I run my module. For context, I unpublished my module from npm and then delenuxt/nitro cloudflare pages bundling issueHi, I'm working on a full stack web app using nuxt3 for the frontend and nitro for the backend. My Nuxt infinity loading list based on paginationHello guys, I am trying to make an infinity loading list using API pagination, and I have problems wModule & PiniaHi πŸ™‚ I'm currently creating a module for my company. I've installed `@pinia/nuxt` & `pinia` in it.nuxt 3 testing examplesHey guys, I am starting to write tests for our Nuxt 3 application, but am having a hard time findingUpdating dependencies causes build issuesHi there, when running `npm update` for our project (https://github.com/jhumanj/opnform), we get themoving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?Hello, as a title says, how would you refactor this example to keep SSR working exactly 1:1? Nuxt 2