RFC: server/functions convention

[antfu]

Motivation

I love the convention we had for server/api to define server routes in a very simple way.

While in some cases, we might also have a set of functions that are aimed to run on the server-side only. For example, I might have a set of APIs that I need to ensure it ensures running on server APIs to avoid leaking the API keys.

// apis.ts

export async function queryUserData(id) {
  return data.from.db()
}

export async function queryPostData(id) {
  return data.from.db()
}

// ...

To have them accessible on the client-side, we need to have multiple server/api/xxx.ts files to expose them one by one. Like

// server/api/user.ts
import { queryUserData } from '../apis'

export default defineEventHandler(async (event) => {
  const body = await useBody(event)
  const { id } = body
  return await queryUserData(id)
})

// repeat this for every APIs you have

// client side

const userData = await $fetch('/api/user', { method: 'POST', body: { id }})

While it's great we already provide type safety for API routes, it's still some work and scaffolding code to make it work.

Propsoal

I am thinking to have a server/rpc folder that we could proxy all the exported functions to the client-side with the correct type as RPC functions.

For example:

// server/rpc/apis.ts

export async function queryUserData(id) {
  return data.from.db()
}

export async function queryPostData(id) {
  return data.from.db()
}

// ...

// client side:

const rpc = useNitroRPC() // or other name

cosnt reuslt = await rpc.queryUserData(id)

Here is a demo implementation with Nuxt 3: https://stackblitz.com/edit/github-wcd1zn?file=app.vue

[danielroe]

Nice suggestions! This might effectively be implementing #20, I think?

[pi0]

Also related:

• https://github.com/johannschopplich/uncreate
• feat: createClient REST client using JS proxies unjs/ofetch#69

[antfu]

Making experiments here https://github.com/antfu/nuxt-server-fn

[cawa-93]

Look at https://github.com/wobsoriano/trpc-nuxt

[awdr74100]

Thanks @antfu for such a great idea!

When nitro already provides type safety, isn't it a bit redundant to combine trpc with nuxt? just the type safety part.

[uptownhr]

@antfu love the idea. Would like to see an equivalent to nextjs server actions in the vue/nuxt side of the world.

Where has the rfc and experiment land? Would love to understand if plans are being made with the nuxt group.

[hminghe]

Look at https://github.com/hminghe/nuxt-unapi

// api/user.ts
import { z } from 'zod'

export const getUser = defineApi({
  props: z.number(),
  // id type is number
  async handler (id) {
    return db.user.get(id)
  },
})

// pages/user.vue
<script setup>
import { getUser } from '~/api/user'

const { data } = await useAsyncData(async () => {
  const user = await getUser(1)
  return user
})
</script>