Nuxt•5d ago

Docker nuxt $fetch and useFetch

Hi, why do i have to use different http links for each one? My app have back api in different container so request is sended in $fetch to api.localhost or container name php in useFetch. Why is that? I understand that useFetch is prerender data on ssr but can I make one address for request to not get confused over time. Thanks

6 Replies

kapa.ai•5d ago

Hi @HardWare. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This is a great question about using Nuxt with Docker containers and API requests. The behavior you're experiencing is related to how Nuxt handles server-side rendering (SSR) and client-side requests. Let me explain: 1. $fetch vs useFetch: - $fetch is a low-level utility for making HTTP requests, while useFetch is a higher-level composable that handles both server-side and client-side fetching Docs > Getting Started > Data Fetching (https://nuxt.com/docs/getting-started/data-fetching). 2. Different URLs for server and client: - When using useFetch, the request is made both on the server and the client. On the server, it needs to use the internal Docker network address (like container name php), while on the client, it needs to use the publicly accessible URL (like api.localhost) Stack Overflow Post (https://stackoverflow.com/questions/77319854). 3. Solution: You can create a custom fetcher that uses different URLs based on whether it's running on the server or client. Here's an example:

export async function fetchStrapiUrl(url: string) {
    const runtimeConfig = useRuntimeConfig()
    const strapiBaseUri = process.server ? "<http://strapi:1337/api"> : runtimeConfig.public.strapiBaseUri + '/api';
    const res = await fetch(strapiBaseUri + url);
    return await res.json();
}

export async function fetchStrapiUrl(url: string) {
    const runtimeConfig = useRuntimeConfig()
    const strapiBaseUri = process.server ? "<http://strapi:1337/api"> : runtimeConfig.public.strapiBaseUri + '/api';
    const res = await fetch(strapiBaseUri + url);
    return await res.json();
}

Stack Overflow Post (https://stackoverflow.com/questions/77319854) This approach allows you to use a single function for both server and client requests, simplifying your code and reducing confusion. 4. Custom useFetch: You can even create a custom useFetch composable that uses this logic:

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api // Assuming you've set up $api with the correct base URL logic
  })
}

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api // Assuming you've set up $api with the correct base URL logic
  })
}

Docs > Guide > Recipes > Custom useFetch in Nuxt (https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata) By implementing these solutions, you can use a single address for your requests, making your code more consistent and easier to maintain over time. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@358326054357565442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

FoxForGate•5d ago

Hello, how are you?, to help organize multiple APIs I created a module, see if it solves your problem https://www.npmjs.com/package/nuxt-http-preset

npm

nuxt-http-preset

A Nuxt module to manage and simplify HTTP requests across multiple APIs and endpoints.. Latest version: 1.0.0, last published: 22 days ago. Start using nuxt-http-preset in your project by running npm i nuxt-http-preset. There are no other projects in the npm registry using nuxt-http-preset.

Orbis•4d ago

You should alsways take the "public" adress/host. In your case api.localhost. the service name php will only work server-side. Services from a compose stack know each other by the service name, but if you send html and js to your browser and fetch there, your browser does not know php as adress, because it's on your machine and not inside the stack

HardWareOP•4d ago

Okey, so its unable to change and I have to work with it. But it's fine if i'm using my docker container name to do server request?

Orbis•4d ago

What do you mean with unable to change? In production set your backend url to your api domain. Works server and client side

Gaming

Programming

Docker nuxt $fetch and useFetch