Momentary `null` value when use[Client] is used with a server route

[jonkri]

Environment

• Operating System: Darwin
• Node Version: v20.10.0
• Nuxt Version: 3.13.0
• CLI Version: 3.13.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, modules, openFetch, runtimeConfig
• Runtime Modules: [email protected]
• Build Modules: -

Reproduction

test.zip

Describe the bug

use[Client] produces a null value in its data property when a Nuxt server route is used. useFetch doesn't.

Additional context

This backend can be used when running the reproduction:

const http = require("http");

const app = http.createServer((request, response) => {
  if (request.url === "/api/test") {
    response.setHeader("Content-Type", "application/json");
    response.write(JSON.stringify({ "test": "test" }));
  } else {
    response.statusCode = 404;
  }
  response.end();
})

app.listen({ port: 3001 });

Logs

No response

[jonkri]

I've uploaded a reproduction.

Just run the backend (see Additional context above) with node index.js, run the frontend with npm run dev, and visit http://localhost:3000.

This code in app.vue works:

const test = (await useFetch("/api/test")).data;

This code in app.vue server-side renders the code correctly but then produces a 500 Internal Server Error page due to test being null:

const test = (await useApi("/test")).data;

[jonkri]

@enkot: Do you happen to see anything in /server/api/[...].ts that conflicts with nuxt-open-fetch's use[Client] function?

import { defineEventHandler, H3Event, parseCookies, setCookie } from "h3";
import { joinURL } from "ufo";

export default defineEventHandler(async (event: H3Event) => {
  const cookies = parseCookies(event),
    { proxyUrl } = useRuntimeConfig(),
    target = joinURL(proxyUrl, event.path),
    token = cookies?.token;

  if (token !== undefined && token !== "") {
    setCookie(event, "token", token);
  }

  return proxyRequest(event, target);
});

[jonkri]

I looked into this some more and have arrived at a simpler reproduction.

test.zip

I'm no longer using a server route, only routeRules.

nuxt.config.ts:

export default defineNuxtConfig({
  // ...
  modules: ["nuxt-open-fetch"],
  openFetch: {
    clients: {
      api: {
        baseURL: "/api",
        schema: "schema.json",
      },
    },
  },
  routeRules: {
    "/api/**": { proxy: "http://localhost:3001/api/**" },
  }
});

App.vue:

// const test = (await useFetch("/api/test")).data; // Works ✅
const test = (await useApi("/test")).data; // Doesn't work ❌

To reproduce:

$ unzip test.zip

In one terminal:

$ cd test
$ node index.js

In another terminal:

$ cd test
$ npm install

Visit http://localhost:3000/ and refresh the page. It will briefly display “test”, then it will display “$setup.test is null”.

[murshex]

Same problem, all response values are undefined

[enkot]

Hi @jonkri,

You don't need to use routeRules in order to request server route:

export default defineNuxtConfig({
  // ...
  modules: ["nuxt-open-fetch"],
  openFetch: {
    clients: {
      api: {
        baseURL: "/api",
        schema: "schema.json",
      },
    },
  }
});

[jonkri]

@enkot: I'm afraid I don't follow.

This configuration causes the code to fail in the same way:

export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  modules: ["nuxt-open-fetch"],
  openFetch: {
    clients: {
      api: {
        baseURL: "http://localhost:3001/api",
        // baseURL: "/api",
        schema: "schema.json",
      },
    },
  },
});

[jonkri]

@Norbiros: Since you are now a maintainer, I figured perhaps I could clue you in on this. I feel that this issue may not be fully resolved. If you happen to have a few minutes to take a quick look, I'd appreciate it!

[Norbiros]

I'm not sure when this was fixed, but I was able to reproduce the issue on version 0.9.5. With nuxt-open-fetch 0.12.2, everything works properly. In the attachment below I used Nuxt v4, but the latest v3 should work as well.

resolved.zip