Muhammad Mahmoud Posts - Answer Overflow

Muhammad Mahmoud

•Created by Muhammad Mahmoud on 5/3/2024 in #❓・help

Question about using SWR/ISR with user auth

Hello I'm thinking about enabling swr for some pages to avoid waiting for rendering everytime and enhance the response time. But I'm worried it would cause conflicts with user state. An example is I have a Login button in the header which shows a user dropdown if logged in and a Logout button. Are these would be handled properly if using swr or do I have to make certain adjustments?

3 replies

NNuxt

•Created by Muhammad Mahmoud on 4/9/2024 in #❓・help

Calling an API on my local machine from within a container only works at first load

Hey guys 👋 I'm running a Nuxt app inside a Docker container that talks to my local machine Laravel API on localhost:8000. I've added these lines in my docker-compose file to make the container see my localhost.

extra_hosts:
  - 'host.docker.internal:host-gateway'

extra_hosts:
  - 'host.docker.internal:host-gateway'

.env

NUXT_PUBLIC_BASE_URL="http://host.docker.internal:8000"

NUXT_PUBLIC_BASE_URL="http://host.docker.internal:8000"

Although The initial page load works, the subsequent link clicks fail with a 404 error as the browser send the requests to http://host.docker.internal:8000/api/some-api-endpoint and don't find it. I guess I need some sort of two-way mapping but I don't have a clue where to start looking.

1 replies

NNuxt

•Created by Muhammad Mahmoud on 3/21/2024 in #❓・help

JSDocs from layers doesn't show in IDE

1 replies

NNuxt

•Created by Muhammad Mahmoud on 3/16/2024 in #❓・help

`defu` doesn't override the value if `undefined` is passed

Hey 👋 We're using a useFetch wrapper to pass extra headers, etc with each request. We want to cache all data by default using getCachedData and opt-out from this when needed

import type { UseFetchOptions } from 'nuxt/app';

export function useCustomFetch<T>(url: string, options: UseFetchOptions<T> = {}) {
  const ourDefaults = { 
    getCachedData: (key) => nuxtApp.payload.data[key] || nuxtApp.static.data[key],
    // Some other defaults
  }

  const options = defu(opts, ourDefaults)

  return useFetch(url, options)
}

import type { UseFetchOptions } from 'nuxt/app';

export function useCustomFetch<T>(url: string, options: UseFetchOptions<T> = {}) {
  const ourDefaults = { 
    getCachedData: (key) => nuxtApp.payload.data[key] || nuxtApp.static.data[key],
    // Some other defaults
  }

  const options = defu(opts, ourDefaults)

  return useFetch(url, options)
}

It's working okay but when opting out by passing undefined to getCachedData it doesn't apply it. Is there a way to tell defu that I want to explicitly set the key to undefined or do I have to always pass a function that returns undefined as a value?

1 replies

Gaming

Programming