Nuxt•2y ago

Multiply return types

When having an API and there is multiple return scenarios. e.g.

export default defineEventHandler(async (event) => {
  const { isactive } = getQuery(event) as {
    isactive?: string;
  };

  if (isactive === "true") {
    return {
      isactive: true,
    };
  } else {
    return {
      hello: "world",
    };
  }
});

export default defineEventHandler(async (event) => {
  const { isactive } = getQuery(event) as {
    isactive?: string;
  };

  if (isactive === "true") {
    return {
      isactive: true,
    };
  } else {
    return {
      hello: "world",
    };
  }
});

How can I on the frontend determine and use types based on the result? I was hoping something like this would work:

<template>
  <div>
    <div v-if="response.hello">
      <!-- Make types work here -->
      {{ response.hello }}
    </div>
    
    <div v-if="response.isactive">
      <!-- Make types work here -->
      {{ response.isactive }}
    </div>
  </div>
</template>

<template>
  <div>
    <div v-if="response.hello">
      <!-- Make types work here -->
      {{ response.hello }}
    </div>
    
    <div v-if="response.isactive">
      <!-- Make types work here -->
      {{ response.isactive }}
    </div>
  </div>
</template>

The error i'm getting is something like:

Property 'hello' does not exist on type 'SerializeObject<...

Property 'hello' does not exist on type 'SerializeObject<...

23 Replies

Unknown User•2y ago

Message Not Public

MadsOP•2y ago

Yes, but then I'm missing out on the free typesafety from Nitro. 😄 I've figured a better solution for me right now is to just use different API's and return a single object.

🇨🇭 Marko Bolliger <cannap>•2y ago

is there a way to write type safe nitro apis? without trpc? i think not we need to share the type between server and client or?

MadsOP•2y ago

My terminology may be wrong, maybe it's called type inferring, not sure of the name.

🇨🇭 Marko Bolliger <cannap>•2y ago

yes but how the routes are defined on a folder sturcture? you know trpc? this solves this problem works best with zod and prisma so you know what server need was server repsonse full autocompletion for everything input and response

MadsOP•2y ago

I know what it is, but I haven't tried it. Have you used it with Nuxt?

🇨🇭 Marko Bolliger <cannap>•2y ago

but i wonder how this will work without trpc trpc?

🇨🇭 Marko Bolliger <cannap>•2y ago

https://github.com/cannap/recipes

GitHub

GitHub - cannap/recipes: Simple Recipe app for learning purpose

Simple Recipe app for learning purpose. Contribute to cannap/recipes development by creating an account on GitHub.

🇨🇭 Marko Bolliger <cannap>•2y ago

just for testing but found new bugs on the integration from the nuxt plugin itself

🇨🇭 Marko Bolliger <cannap>•2y ago

https://github.com/wobsoriano/trpc-nuxt/issues/74

GitHub

Devtools breaks when using it inside a component and some other err...

When using i have this in a component const { $client } = useNuxtApp() const addRecipe = async () => { await $client.recipes.create.mutate(recipe.value) the error is throwing but when i submit s...

MadsOP•2y ago

Yeah, I'm kinda not liking trying it out. Had so many issues back in the day with Nuxt 2 and GraphQL. not wanting to go through tooling hell.

🇨🇭 Marko Bolliger <cannap>•2y ago

the other guy found a way but its weired

MadsOP•2y ago

I like Nuxt's inferred types. That's enough for me right now.

🇨🇭 Marko Bolliger <cannap>•2y ago

ok 😄 wait where can i read more about that so nuxt can create inferred types from an api response? nvm i will try it

MadsOP•2y ago

Yeah if you use /server/api/test.get.ts

🇨🇭 Marko Bolliger <cannap>•2y ago

ah damn thanks i never trought about that but the types are autogenerated or? codegen in trpc is runtime 😄 also while dev

MadsOP•2y ago

e.g. File: /server/api/test.get.ts

export default defineEventHandler(async (event) => {
  const { isactive } = getQuery(event) as {
    isactive?: string;
  };

  if (isactive === "true") {
    return {
      isactive: true,
    };
  } else {
    return {
      hello: "world",
    };
  }
});

export default defineEventHandler(async (event) => {
  const { isactive } = getQuery(event) as {
    isactive?: string;
  };

  if (isactive === "true") {
    return {
      isactive: true,
    };
  } else {
    return {
      hello: "world",
    };
  }
});