Webpack error when updating document in collection with payload.update

Mark | Omniux

4 weeks ago

13

 await payload.update({
        collection: 'clients',
        id,
        data: {
            status: 'meetingInviteSent'
        },
        depth: 2,
    });

TypeError: payload__WEBPACK_IMPORTED_MODULE_2__.default.update

        var result = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/clients`, { 
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            clientInformation: {
              name: `${firstName} ${lastName}`,
              email,
              company 
            },
            name: `${firstName} ${lastName}`,
            email,
            company,
            lastContacted: new Date(),
            services: services.join(', '),
            message
          })});

• 

  jesschow

  Payload Team

  4 weeks ago

  @Mark | Omniux do you have update access defined on your clients collection?

• 

  Mark | Omniux

  4 weeks ago

  Hey @jesschow, I do, yeah, I have it set using a Permissions check, I can try it without. I did use a workaround for the time being and did an update using the useFormFields hook, but it is quite a tenuous solution i'll be honest haha

  
  

  
  

  I should probably mention I am using a custom UI field with a custom button that calls payload.update

• 

  jesschow

  Payload Team

  4 weeks ago

  @Mark | Omniux glad you found a workaround 💥 still curious what is causing this, do you get the same typeError if you explicitly set the type? i.e.

  
  

  data: {
    status: 'meetingInviteSent' 
  } as any, 

• 

  Mark | Omniux

  4 weeks ago

  Afraid that's not working either. console logging the 'payload' object is returning an empty object, so the update function doesn't exist. I am possibly misunderstanding how payload.update is meant to function. I am trying to use it inside of a custom React component that is being displayed via a UI field

  
  

  
  

  I'm doing

  import payload from payload

  and using it like this;

  
  
  

  import payload from 'payload';
  import { useForm, useFormFields } from 'payload/components/forms';
  import { Data } from 'payload/dist/admin/components/forms/Form/types';
  import React, { useEffect, useState } from 'react'
  
  export const ClientInfo = () => {
      const [prevState, setPrevState] = useState<Data | null>(null)
      const { getData, submit } = useForm();
      const { email, name, company, services, id } = getData();
      const [status, setStatus]: [string, (value: string) => void] = useFormFields(([fields, dispatch]) => [
          fields.status.value as string, (value: string) => dispatch({ type: 'UPDATE', path: 'status', value: value })
      ]);
  
      const dropClient = () => {
          setStatus('lost');
      }
  
      const onboardClient = async () => {
          //setStatus('meetingInviteSent');
          await payload.update({
              collection: 'clients',
              id,
              data: {
                  status: 'meetingInviteSent'
              } as any,
              depth: 2,
          });
      }
  
      return (<div> ... <button type='button' onClick={async () => await onboardClient()}>Onboard Client</button> </div>)
  }

• 

  jmikrut

  Payload Team

  4 weeks ago

  Payload is a Node-only class, and it can't be run in the browser

  
  

  
  

  you need to make fetches to your API within the admin panel code

• 

  Mark | Omniux

  4 weeks ago

  gotcha, I was starting to figure that out as I was pasting my code snippets 😄 Would it maybe be possible to fetch this payload instance and hold it in a provider? Not so much for my use case but for future use cases? Having a usePayload hook could be really useful for a situation like this

• 

  jmikrut

  Payload Team

  4 weeks ago

  nope can't do that, because you can't serialize functions / methods as JSON

  
  

  
  

  BUT what we could do is "mock" payload as a hook so that it ships all the same methods, similar API, but written for browser instead

  
  

  
  

  this is something that we have on our radar

• 

  Mark | Omniux

  4 weeks ago

  Yup totally makes sense. My brain definently stopped working with this one haha. Thanks!