I am trying to to update a field in my collection with the following code;
await payload.update({
collection: 'clients',
id,
data: {
status: 'meetingInviteSent'
},
depth: 2,
});
However this gives me the following error in the console;
TypeError: payload__WEBPACK_IMPORTED_MODULE_2__.default.update
The collection doesn't update however the toast still displays saying that the collection updated successfully.
I created this document using the JSON API from my Next.js app;
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
})});
This adds the document to Payload. But updating it using the local API fails
@Mark | Omniux do you have update access defined on your clients collection?
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
@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,
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>)
}
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
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
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
Yup totally makes sense. My brain definently stopped working with this one haha. Thanks!