kāné Posts - Answer Overflow

kāné

•Created by kāné on 12/28/2024 in #❓・help

Nuxt 3 API Endpoint Data Lost During Server-Client Transfer Despite Valid Server-Side Data

I'm experiencing a puzzling issue with my Nuxt 3 application where data is being lost during the transfer from server to client, despite the data being valid on the server side. Setup I have a view model that handles data transformation:

class ItemViewModel {
  // ... other properties and methods

  toJSON() {
    return {
      id: this.id,
      title: this.title,
      description: this.description,
      // ... other properties
    };
  }
}

class ItemViewModel {
  // ... other properties and methods

  toJSON() {
    return {
      id: this.id,
      title: this.title,
      description: this.description,
      // ... other properties
    };
  }
}

And an API endpoint that returns this data:

// server/api/items/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id');
  const result = await MyService.getItem(id);
  const item = ItemViewModel.fromData(result);
  
  // Server-side console shows this data is valid
  console.debug('item.toJSON():', item.toJSON());  // Shows correct data structure
  
  return item.toJSON();
});

// server/api/items/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id');
  const result = await MyService.getItem(id);
  const item = ItemViewModel.fromData(result);
  
  // Server-side console shows this data is valid
  console.debug('item.toJSON():', item.toJSON());  // Shows correct data structure
  
  return item.toJSON();
});

On the client side, I'm fetching the data:

<script setup>
const route = useRoute();
const { data, pending, error } = await useFetch(`/api/items/${route.params.id}`);

// data.value is null, despite server logs showing valid data
console.log('Client data:', data.value);  // null
</script>

<script setup>
const route = useRoute();
const { data, pending, error } = await useFetch(`/api/items/${route.params.id}`);

// data.value is null, despite server logs showing valid data
console.log('Client data:', data.value);  // null
</script>

The Weird Part * The server-side logs show the data is valid and structured correctly * If I explicitly return a plain object with the same properties within the API endpoint, instead of return item.toJSON() it works:

// server/api/items/[id].get.ts
...
// This works
return {
  id: item.toJSON().id,
  title: item.toJSON().title,
  description: item.toJSON().description
};

// server/api/items/[id].get.ts
...
// This works
return {
  id: item.toJSON().id,
  title: item.toJSON().title,
  description: item.toJSON().description
};

* Returning item.toJSON() results in a null response on the client side * I've tried various serialization approaches (superjson, JSON.stringify/parse) but the issue persists What's going on here? Why does explicitly creating a new object work while returning the toJSON() result doesn't? Is there something about Nuxt's serialization that I'm missing?

5 replies

NNuxt

•Created by kāné on 12/28/2024 in #❓・help

Restarted dev server, 503 error: ENOENT: no such file or directory worker-56658-1.sock

I decided to restart my dev server, and now it's returning 503 errors of all of a sudden. I get this showing up as the page title when I try access localhost:3000

Error: ENOENT: no such file or directory, access '/var/folders/xs/gw92558x5yb25m5g93rf0dc80000gn/T/nitro/worker-56658-1.sock' | Nuxt

Error: ENOENT: no such file or directory, access '/var/folders/xs/gw92558x5yb25m5g93rf0dc80000gn/T/nitro/worker-56658-1.sock' | Nuxt

I tried clearing out all the usual cache suspects. rm -rf .nuxt .output .node_modules Reinstalling everything pnpm install Rebuilding pnpm run build And then firing up the server again pnpm dev And the error is still happening. This is the second time it's happened in one day. The first time, I found this github issue: https://github.com/nuxt/nuxt/issues/24170 One person suggested restarting the computer. I did that, but it didn't fix it. Feels like erratic behavior so I'm not sure where to even look. I just upgraded my node to v23.5.0 and nuxt to 3.15.0 to see if that would help with anything, but it didn't. If it helps, my app is within a monorepo using a pnpm workspace. I am reference another package within the monorepo as a dependency for my nuxt app. I don't think its related as things were working for sometime...

28 replies

NNuxt

•Created by kāné on 11/29/2024 in #❓・help

Issue with Vue 3 + Nuxt 3 useFetch Data Not Displaying in Template

Background I’m building an app using Nuxt 3 and Vue 3 (Node v20.18.0). I’m running into a fundamental issue with template reactivity when trying to display data fetched with useFetch. Specifically: - I can log the data from useFetch in <script setup>, and the data is correct. - However, when binding to the fetched data in the template, the expected reactivity doesn’t occur. - Some solutions work (like wrapping the data in computed), but they feel unnecessary for something as fundamental as this. What I’ve Tried 1. Debugging Data Reactivity

console.log("Data:", data.value); 
console.log("Title:", data.value.title);

console.log("Data:", data.value); 
console.log("Title:", data.value.title);

- These logs always show the correct data and title values. 2. Providing Default Values

const { data } = await useFetch('/api', { default: () => ({ title: 'Untitled' }) });

const { data } = await useFetch('/api', { default: () => ({ title: 'Untitled' }) });

- Ensures data.value is initialized, but this doesn’t fix the template reactivity for data.value.title. 3. Optional Chaining in the Template

<p v-else>Title: {{ data?.value?.title || 'No title available' }}</p>

<p v-else>Title: {{ data?.value?.title || 'No title available' }}</p>

- Prevents errors but still doesn’t display the title, even though <pre>{{ data }}</pre> confirms it exists. 4. Using computed

const computedData = computed(() => data.value);

const computedData = computed(() => data.value);

- This works, and the title renders correctly when accessed as computedData.title. Questions 1. Why is template reactivity for data.value.title failing? - This seems like a fundamental part of Vue’s reactivity system, so I’m not sure why I need computed for it to work. 2. Is this an issue with Nuxt’s useFetch? - Could Nuxt be optimizing reactivity in a way that breaks expected behavior for deep properties? 3. Am I misusing useFetch? - Is there a better way to fetch data in Nuxt 3 to avoid this issue entirely? 4. Is this a known issue? - I couldn’t find documentation addressing this specific behavior. Should I file a bug report?

6 replies

NNuxt

•Created by kāné on 11/27/2024 in #❓・help

Nuxt Dynamic Route Issue: ID Switching to 'preload.js.map' Unexpectedly

I have a very simple dynamic route. The page is in the following directory: ~/pages/explore/initiative/[id].vue When I navigate to that page via NuxtLink, it seems to be making the request several times. I added the following code to [id].vue to verify if this is the case

const route = useRoute()
const initiativeId = route.params.id;
console.log("Route Params: ", route.params.id);

const route = useRoute()
const initiativeId = route.params.id;
console.log("Route Params: ", route.params.id);

Here's an example of the output

Route Params:  18

 WARN  [@vue/server-renderer] Skipped rendering unsafe attribute name: "

Route Params:  preload.js.map

Route Params:  18

 WARN  [@vue/server-renderer] Skipped rendering unsafe attribute name: "

Route Params:  preload.js.map

So it seems that the ID is being switched to preload.js.map. I didn't write any code to that switch, so it seems to be the framework making the request or some other package included within. Not sure if this is relevant, but there's also an index.vue page in ~/pages/explore/initiative/index.vue

6 replies

Gaming

Programming