Payload api call (payload.find...) doesn't work with client side components

greenstan.last year

9

• 

  hugomartinez_last year

  I’m not sure if this will be helpful, but I once used this hook to make requests from a component:

  https://payloadcms.com/docs/admin/react-hooks#usepayloadapi
  
  

  I don’t know if it’s entirely correct, but it does work 😁

• 

  greenstan.last year

  I still seem to be getting the same issue, I can't use the payload utils in client-side components

  
  
  

  Did you use this method with the latest version of payloadcms or was this in an earlier version ? 😃

• 

  adrian8749last year

  Payload Local API (aka payload.find() etc.) is

  server-only

  , for client you should use REST API

  
  
  https://payloadcms.com/docs/local-api/overview
  
  

  "The Payload Local API gives you the ability to execute the same operations that are available through REST and GraphQL within Node,

  directly on your server.

  "

• 

  greenstan.last year

  Yes,

  
  
  

  But even with the api method (Of using the api endpoint to retrieve the database objects on client components) Lots of dependency errors occur which originate from the payload module files

  
  
  

  These errors ONLY occur when I use a payload function (even REST api call) within a client component
• 

  adrian8749last year

  show me the code for fetching data, or the code triggering errors

  
  
  

  you can't use

  payload

  object in client at all

  
  
  

  the errors you provided looks like using server utilities on client

• 

  greenstan.last year

  The client component file code:

  
  

  "use client"
  import { getLessons } from "@/actions/getLessons";
  import { getPayload } from 'payload'
  import config from '@payload-config'  
  import ModuleTimeline from "@/components/module-timeline"
  import { usePayloadAPI } from '@payloadcms/ui'
  
  export default async function Page({
    params,
  }: {
    params: Promise<{ id: string }>
  }) {
  
    const { id } = await params;
  
    const [{ data, isError, isLoading }, { setParams }] = usePayloadAPI(
      '/api/lesson/all',
      {
        initialParams: { depth: 1 },
      }, 
    )
    console.log(data)
  
  
    return (
      <div className="flex flex-col items-starter justify-start mt-16 min-h-screen py-8 px-32 bg-gray-100">
        <h2 className="text-black text-4xl font-bold text-center">
       
        </h2>
        <ModuleTimeline />
      </div>
    );
  }

  
  
  

  The Lesson Collection config:

  
  

  export const Lesson: CollectionConfig = {
    slug: 'lesson',
    endpoints: [
      {
        path: '/all',
        method: 'get',
        handler: async (req, res, next) => {
          try {
            const lessons = await req.payload.find({
              collection: 'lesson',
              depth: 2, // Include related data 2 levels deep
            });
            
            res.status(200).json(lessons);
          } catch (error) {
            next(error);
          }
        }
      }
    ],
  //... The rest of the collection code

  
  
  

  Yes but they are all from the payloadcms utils, so I'm not sure why there are conflicts

• 

  adrian8749last year

  remove getPayload and config imports

  
  
  

  and it should be fine

• 

  greenstan.last year

  Perfect 🤩,

  
  

  That seems to have solved the issue

  
  
  

  + another thing to keep in mind is that the component shouldn't be async

  
  
  

  I used this instead:

  
  
  

    export default  function Page() {
    const params = useParams<{id:string}>;
    
    const id = params.id;

  
  
  

  Thanks

  @299531596036571136

  and

  @375533665167605760

  🙏🏻 🙏🏻

• 

  adrian8749last year

  yeah client components can't be async, that's just next.js rules - it's not Payload specific