Dragofafmir Comments - Answer Overflow

Dragofafmir

•Created by patchamamma on 4/24/2024 in #❓・help

Fetch Data even on page reload using custom Fetch Composable

import type { UseFetchOptions } from '#app'
import {useAuth, useFetch} from "#imports";

export async function useApiFetch<T>(url: string | (() => string), options: UseFetchOptions<T> = {}, authAccess: boolean = true) {
    const {token} = useAuth()
    const config = useRuntimeConfig()

    await useFetch(config.public.apiDomain + 'sanctum/csrf-cookie', {
        credentials: 'include',
        headers: {
            Accept: 'application/json',
        }
    })

    const laravelCookie = useCookie('XSRF-TOKEN')

    const defaults: UseFetchOptions<T> = {
        baseURL: config.public.apiDomain + 'api/v1/',
        headers: {
            Accept: 'application/json',
            'X-XSRF-TOKEN': laravelCookie.value as string,
            ...(authAccess && {Authorization: token.value ? token.value : ''}),
        },
        credentials: 'include',
        ...options,

    }

    return useFetch(url, defaults)
}

import type { UseFetchOptions } from '#app'
import {useAuth, useFetch} from "#imports";

export async function useApiFetch<T>(url: string | (() => string), options: UseFetchOptions<T> = {}, authAccess: boolean = true) {
    const {token} = useAuth()
    const config = useRuntimeConfig()

    await useFetch(config.public.apiDomain + 'sanctum/csrf-cookie', {
        credentials: 'include',
        headers: {
            Accept: 'application/json',
        }
    })

    const laravelCookie = useCookie('XSRF-TOKEN')

    const defaults: UseFetchOptions<T> = {
        baseURL: config.public.apiDomain + 'api/v1/',
        headers: {
            Accept: 'application/json',
            'X-XSRF-TOKEN': laravelCookie.value as string,
            ...(authAccess && {Authorization: token.value ? token.value : ''}),
        },
        credentials: 'include',
        ...options,

    }

    return useFetch(url, defaults)
}

Here's my custom fetch, made for interact with a Laravel API. Maybe you can take it and adapt with your auth logic.

9 replies

NNuxt

•Created by patchamamma on 4/24/2024 in #❓・help

Fetch Data even on page reload using custom Fetch Composable

your auth part is in the useNuxtApp().$autFetch ?

9 replies

NNuxt

•Created by ManUtopiK on 4/25/2024 in #❓・help

How to check if a composable exists ?

Something like this

<script setup lang="ts">
const composableLoaded = ref(false)

const loadMyComposable = async () => {
  try {
    const { myComposable } = await import('./path/to/myComposable')
    myComposable()
    composableLoaded.value = true
  } catch (error) {
    console.error("...", error)
    composableLoaded.value = false
  }
}

onMounted(() => {
  loadMyComposable()
})
</script>

<script setup lang="ts">
const composableLoaded = ref(false)

const loadMyComposable = async () => {
  try {
    const { myComposable } = await import('./path/to/myComposable')
    myComposable()
    composableLoaded.value = true
  } catch (error) {
    console.error("...", error)
    composableLoaded.value = false
  }
}

onMounted(() => {
  loadMyComposable()
})
</script>

9 replies

NNuxt

•Created by ManUtopiK on 4/25/2024 in #❓・help

How to check if a composable exists ?

Did you try to try catch an const { myComposable } = await import('./path/to/myComposable'), try to use it or catch it ?

9 replies

NNuxt

•Created by patchamamma on 4/24/2024 in #❓・help

Fetch Data even on page reload using custom Fetch Composable

I also use a custom composable, the data is still retrieved. Can you say more? I don't see xhr requests during a reload but the data is still obtained

9 replies

Gaming

Programming