Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Webpack error when updating document in collection with payload.update

default discord avatar
markatomniux2 years ago
8

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

  • default discord avatar
    jessrynkar2 years ago
    @191776538205618177

    do you have update access defined on your clients collection?

  • default discord avatar
    markatomniux2 years ago

    Hey

    @854377910689202256

    , 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

  • default discord avatar
    jessrynkar2 years ago
    @191776538205618177

    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, 
  • default discord avatar
    markatomniux2 years 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>)
    }
  • discord user avatar
    jmikrut
    2 years 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

  • default discord avatar
    markatomniux2 years 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

  • discord user avatar
    jmikrut
    2 years 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

  • default discord avatar
    markatomniux2 years ago

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

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.