better documentation for extending rich JSON payloads

[sharifzadesina]

Environment

• Operating System: Linux
• Node Version: v16.20.0
• Nuxt Version: 3.6.1
• Nitro Version: 2.5.1
• Package Manager: npm@8.19.4
• Builder: vite
• User Config: css, postcss, modules, experimental, runtimeConfig
• Runtime Modules: @pinia/nuxt@0.4.11
• Build Modules: -

Reproduction

Without enabling experimental renderJsonPayloads, the code below was working fine:

useAsyncData<object>(async () => {
  return new class {
    whatever = 'whatever';
    toJSON() {
      return { whatever: this.whatever };
    }
  }
});

or this one threw just a warning:

useAsyncData<object>(async () => {
  return new class {
    whatever = 'whatever';
  }
});

But now with renderJsonPayloads enabled, I always get Cannot stringify arbitrary non-POJOs error, even with a toJSON method!

Describe the bug

No response

Additional context

No response

Logs

No response

[danielroe]

You can add this plugin:

export default definePayloadPlugin((nuxtApp) => {
  definePayloadReducer('JSONifiable', data => 'toJSON' in data && JSON.stringify(data.toJSON()))
  definePayloadReviver('JSONifiable', data => JSON.parse(data))
})

The issue is of course that the data will (as before the change) not be the actual class but a normal JS object. You can add additional handlers that actually revive the original classes.

[sharifzadesina]

@danielroe But what is the point to write a plugin for every class that we have while it was working perfectly fine before?!

I am getting raw data from API and then converting them to model classes, by this experimental default you added, I need to write a custom plugin for every model class that I have, while I had absolutely no problem before.

It is a common approach to convert the raw data of API to model classes.

[danielroe]

The plugin I provided should work for any class with a toJSON method.

It is possible to disable this behaviour as specified in the PR, but you should provide a reviver/reducer for any custom classes like this rather than have a difference between server/client behaviour of the data.

[CernyMatej]

@danielroe Is the reason why this example doesn't work related to the way I used definePayloadPlugin ? Or does that not apply to the error returned by useFetch ?
https://stackblitz.com/edit/nuxt-starter-kkmozm?file=app.vue

When I set server to false in the useFetch, the methods of ApiError can be accessed in the template, however, an error still appears in the console - and when the request is made on the server, it only shows an error message $setup.error.getValidationErrors is not a function and doesn't render the page.

[mmclofe]

@danielroe i hanve add the plugin,but i got a new error

[danielroe]

Could you share your code?

[mmclofe]

Could you share your code?
// plugins

// api intercept

I can't share the code right now. Can you help me see where the problem is through the pictures? thanks

[danielroe]

ah, you should probably add something like:

export default definePayloadPlugin((nuxtApp) => {
  definePayloadReducer('JSONifiable', data => data && typeof data === 'object' && 'toJSON' in data && JSON.stringify(data.toJSON()))
  definePayloadReviver('JSONifiable', data => JSON.parse(data))
})

[mmclofe]

ah, you should probably add something like:

export default definePayloadPlugin((nuxtApp) => {
  definePayloadReducer('JSONifiable', data => data && typeof data === 'object' && 'toJSON' in data && JSON.stringify(data.toJSON()))
  definePayloadReviver('JSONifiable', data => JSON.parse(data))
})

Now back to the original question

[maximkrouk]

Having the same issue, here is my case: emmanueltouzery/prelude-ts#77

export default definePayloadPlugin(() => {
  definePayloadReducer('Some', data => data && typeof data === 'object' && 'toJSON' in data && JSON.stringify(data.toJSON()))
  definePayloadReviver('Some', data => JSON.parse(data))
})

Couldn't make this work either

---

Well, I managed to write a plugin for my usecase (see linked issue above), but it solves the problem only for one specific case, in general it feels kinda weired that I spent about 3 hours trying to enable ssr for such a simple wrapper-type like Option...

And for those who came here without any understanding what's going on, here is a quick summary of how I see the reason behind this error:

• Since ssr sends prerendered webpage to the client it should serialize the data you use on the frontend
• For some reason you used a class (probably to have some convenient methods, instead of going with an interface + free functions)
• Nuxt uses devalue.stringify for serialization
• devalue.stringify doesn't support ts classes, because it doesn't know how to convert methods into json
• Probably it could serialize them as strings, but I read somewhere that it's a bad practice, plus I'm not sure that it's possible to serialize private methods and how to deserialize the whole thing
• So without proper serialization nuxt can't send a full object from ssr server to your frontend

A few more thoughts:
I didn't check it, but probably you can create wrappers like

import * as Lib from 'some-lib'
export type SomeType extends Lib.SomeType {
  function toJSON() { ... }
}

and use them in your code instead of the originally unsupported types
looks like devalue.stringify can use this function or at least a simpler plugin from above 🤔 But I'm not sure that you'll get expected class...

[manniL]

Resolved via #24680

[posva]

The added documentation doesn't seem to include enough keywords to be findable.
I would add somewhere in the text the terms payload, plugin, reducer, and reviver. Currently, searching for any of them yields no results or wrong ones, and the page with examples is still hard to find