Is it possible to use the Payload Local API in a monorepo setup?

[hsb-tonmoy]

Since both apps are in the same repo, it'd be awesome if there's a way to use the Payload Local API instead.

[slavanossar]

I've also wondered about this, and I looked into it briefly way back when I was originally set up this template. The issue I faced was that Payload Local API needs to be run within Payload's app context, so you can't just simply do import payload from 'payload' within Nuxt server routes for example, as payload in that context wouldn't be aware of any configuration or environment variables.

I can definitely see the appeal for something like this, and the Local API docs specifically reference using it within Next.js. I have a lot more experience with Nuxt and Payload now, so I'll take another look when I have some time.

[slavanossar]

I've got this working, there was a fair bit to do to get everything working again with Payload 3.

As expected the typings all work automatically via $fetch and through to any composables which is really nice. Still requires creating routes/composables for the data types you want to access (and potentially modify via update()), but no need to write/maintain/generate any GraphQL which is a huge win.

I've committed my progress so far to the feat/payload-v3 branch, but please note that there are a couple of issues with Payload 3 that I'm still trying to work out:

• The devProxy routes defined in nuxt.config.ts no longer work, results in a redirect loop (need to use new nginx configs
• The custom routes.api setting in payload.config.ts doesn't work correctly, meaning I can't override it to _payload to avoid conflict with Nuxt's server API routes
• Some weird conflicts with the @ alias for imports

usePayloadLocalApi Server Utility

// apps/nuxt/server/utils/usePayloadLocalApi.ts

import { getPayload } from 'payload'
import config from '#payload/src/payload.config.js'

export default function () {
  return getPayload({ config })
}

Example Server API Route

// apps/nuxt/server/api/payload/pages/[template].get.ts

export default defineEventHandler(async (event) => {
  const template = getRouterParam(event, 'template')
  const payloadLocalApi = await usePayloadLocalApi()

  const { docs } = await payloadLocalApi.find({
    collection: 'pages',
    where: {
      template: { equals: template },
    },
  })

  return docs.length ? docs[0] : null
})

Example usePayloadPage Composable

// apps/nuxt/composables/usePayloadPage.ts

import type { Page } from '#payload/payload-types'

export default async function (template: Page['template']) {
  const doc = ref<Page | null>(null)

  // temporarily using server/routes/api-nuxt to avoid conflicts with Payload API route
  doc.value = await $fetch(`/api-nuxt/payload/pages/${template}`)

  if (doc.value) {
    // set up meta
  } else {
    throw createError({
      statusCode: 404,
      message: 'Page data missing.',
    })
  }

  return doc
}

Example usePayloadPage usage

<template>
  <div v-if="fields">
    <p v-text="fields.myTextField" />
  </div>
</template>

<script lang="ts" setup>
const doc = await usePayloadPage('Home')
const fields = doc.value?.homeFields
</script>

Example showing that typings flow through via $fetch

[hsb-tonmoy]

You're a damn rockstar, man. Great work. I'll try it out and let you know how it goes.

[slavanossar]

I was thinking about this more, there are a couple more things to consider with this approach:

• Auth operations would need special consideration.
• Local API uses the overrideAccess option by default, meaning it will ignore all access controls set on collections and fields. Could either be handled via a wrapper for $fetch that attaches a user to the request, or by additional logic in the usePayloadLocalApi server utility to use the auth token stored in the cookie.
• Querying a subset of fields via Local API can be achieved with the select and populate options, to achieve similar functionality with a GraphQL query.
• When using GraphQL and @nuxtjs/apollo, you gain the benefits of reactive queries with variables and caching (e.g. if you are displaying something like a shop page with lots of products that you can filter by category/tag/price/etc.). Can probably recreate this functionality with Local API approach but it's not trivial.

[slavanossar]

I'll be pushing some more updates to the branch when I have some time this week, I've just been quite busy with the new project that is using Payload 3, but I've been improving things as I've been working on it so will port all the changes back to this template.

The custom API route for Payload is working in 3.1.0, and I've changed the aliases so that there are no longer conflicts.

[XPOL555]

I'm working on the infrastructure to release payload CMS and nuxt 3 on kubernetes. I've everything working using kustomize.

Using payloadcms 2. I'll do it for payloadcms 3.

The thing that would be great is to make nuxt 3 POD to call the payloadcms' service shared on the same namespace.