#Facing Issue while fetching the product from database:

2 messages · Page 1 of 1 (latest)

fallen bolt
#

I'm building the ecommerce application, and here is my code for
app/(frontend)/products/[slug]/page.tsx

import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { PayloadRedirects } from '@/components/PayloadRedirects'
import React, { cache } from 'react'

export const dynamic = 'force-static'
export const revalidate = 600

export async function generateStaticParams() {
  const payload = await getPayload({ config: configPromise })
  const products = await payload.find({
    collection: 'product',
    draft: false,
    limit: 1000,
    overrideAccess: false,
    pagination: false,
    select: {
      slug: true,
    },
  })

  const params = products.docs.map(({ slug }) => {
    return { slug }
  })
  return params
}

type Args = {
  params: Promise<{
    slug?: string
  }>
}

export default async function Product({ params: paramsPromise }: Args) {
  const { slug = '' } = await paramsPromise
  const url = '/collections/'
  const product = await queryProductBySlug(slug)

  if (!product) return <PayloadRedirects url={url} />

  return (
    <div>
      <h1>{product.title}</h1>
    </div>
  )
}

const queryProductBySlug = cache(async (slug: string) => {
  const payload = await getPayload({ config: configPromise })
  const result = await payload.find({
    collection: 'product',
    draft: false,
    limit: 1,
    pagination: false,
    where: {
      slug: {
        equals: slug,
      },
    },
  })
  return result.docs[0] || null
})

I'm getting the below error in console:

 GET /products/nose-ring-zein---nrzn7s20 500 in 4604ms
 ✓ Compiled in 406ms
 ✓ Compiled /products/[slug] in 83ms
 ⨯ [Forbidden: You are not allowed to perform this action.] {
  type: 'Forbidden',
  data: null,
  isOperational: true,
  isPublic: false,
  status: 403,
  page: '/products/nose-ring-zein---nrzn7s20'
}

Can anyone help me what I am doing wrong?

rugged turretBOT