PMDL Comments - Answer Overflow

PMDL

Posts Comments

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

I'm thinking transform might not be suited for this after all? Maybe that handling should be made "after" somehow?

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

I'm still not entirely sure why that problem arises tbh, where that wasn't a problem without using transform. My understanding of nuxt lifecycle is not yet optimal.

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

To reply that: If I use const { data } = useFetch('/users') and build some kind of computed ref over data to instantiate data.value using UserModel. And that works but it's very repetitive to do it for every call we have. Instead I could make const { data } = customUseFetch('/users', UserModel) where customUseFetch transforms the received data, instantiating it with the provided model (original question). That's nice but now I get the dreaded ERROR [nuxt] [request error] [unhandled] [500] Cannot stringify arbitrary non-POJOs at hydration stage.

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

I'm gonna try that!

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

That is convincing

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

I have a models/ folder with TS files like users.ts where my classes are. There could be several of those in the same file (class User, class UserStats, class UserProfile, ...), all named exported. As far as I can tell no other exports than those classes that could all be needed to serialise / deserialise. So I guess yes I could traverse that dir? I could try that, but it feels hacky.

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

Is there a way for that plugin to "discover" the classes in my "classes/*ts" folder, import them all, and make the map itself? I'm asking that because I come from python, not javascript, I don't know if that is easy doable.

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

Hi @Cue ! Thanks, yes this is precisely my solution, but I still need to manually add any new class I add to my code to that plugin after I receive an error when developing.

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

There are many of those classes, is there a better way to do this?

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

Hi! It's been a while since that question, I had actually forgot I asked it. So yes, the transform way works to a point (my data is instantiated and reactive), but now I need to register a reducer / reviver couple for each Model, which is cumbersome:

import { plainToInstance, instanceToPlain } from "class-transformer"

export default definePayloadPlugin((nuxtApp) => {
    definePayloadReducer('NewsModel', data => data && data instanceof NewsModel && instanceToPlain(data))
    definePayloadReviver('NewsModel', data => plainToInstance(NewsModel, data))

    definePayloadReducer('UserModel', data => data && data instanceof UserModel && instanceToPlain(data))
    definePayloadReviver('UserModel', data => plainToInstance(UserModel, data))

    definePayloadReducer('CharacteristicModel', data => data && data instanceof CharacteristicModel && instanceToPlain(data))
    definePayloadReviver('CharacteristicModel', data => plainToInstance(CharacteristicModel, data))
})

import { plainToInstance, instanceToPlain } from "class-transformer"

export default definePayloadPlugin((nuxtApp) => {
    definePayloadReducer('NewsModel', data => data && data instanceof NewsModel && instanceToPlain(data))
    definePayloadReviver('NewsModel', data => plainToInstance(NewsModel, data))

    definePayloadReducer('UserModel', data => data && data instanceof UserModel && instanceToPlain(data))
    definePayloadReviver('UserModel', data => plainToInstance(UserModel, data))

    definePayloadReducer('CharacteristicModel', data => data && data instanceof CharacteristicModel && instanceToPlain(data))
    definePayloadReviver('CharacteristicModel', data => plainToInstance(CharacteristicModel, data))
})

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

Ok thanks! Using SSR, we have a serialization/deserialization logic using reducers and revivers and the same class-transformer module. That works well!

24 replies

NNuxt

•Created by PMDL on 10/18/2023 in #❓・help

I want to instanciate incoming data using useFetch(), should I use transform or onResponse()?

We have models we want our incoming JSON data instantiated into:

class UserModel {
  public id: number = 0;
  public username: string = "";
  public email: string = "";

  get user_id() {
    return this.id
  }
}

class UserModel {
  public id: number = 0;
  public username: string = "";
  public email: string = "";

  get user_id() {
    return this.id
  }
}

(This is just an example) We use plainToClass from class-transformer to turn JSON data into those models.

24 replies

Gaming

Programming