Collection hook afterChange not running on create and not keeping values

default discord avatar
arielarial
2 months ago
19

Hey guys! I'm trying to use a collection hook to take a SVG file and get the "inline SVG" and the base64 values.


I currently have 2 problems:



1, The hook is not running when I create the document , only on updates


2, When I'm updating the document, the hook runs and fills the form all right. But the values are not being stored in the DB: after a refresh, the fields are empty again



Here's my hook code. (I'm using next-payload)


What am I doing wrong here?



import { CollectionAfterChangeHook } from "payload/types";

const afterChangeVectors: CollectionAfterChangeHook = async ({ doc, req }) => {
  const svgContent = req.files?.file.data.toString();

  return {
    ...doc,
    inline: svgContent,
    base64: Buffer.from(svgContent).toString("base64"),
  };
};

export default afterChangeVectors;
  • default discord avatar
    notchr
    2 months ago

    Hey @arielarial - How are you bringing in svgContent, is that an import?



    OH I see, it's a buffer from the req



    I think?

  • default discord avatar
    arielarial
    2 months ago

    hi @notchr yes, that's it!

  • default discord avatar
    notchr
    2 months ago

    @arielarial I can look more into the SVG issue, but perhaps the afterChange hook is the issue



    I'm not sure exactly what the hook would be for on create but



    hooks: {
        beforeOperation: [
          ({args, operation}) => {
            if (operation === 'create') {
            }
          }]
    }


    I want to say that could work, but im not sure



    Want to try the beforeOperation and check the "create" type for operation



    maybe just log first to see if it gets picked up

  • default discord avatar
    arielarial
    2 months ago

    let me try that

  • default discord avatar
    notchr
    2 months ago

    cool cool

  • default discord avatar
    arielarial
    2 months ago

    about the SVG, that part is ok! Maybe it's not the best way to achieve it, but I'm still testing if I will need base64 or inline SVG, so for now its working 🙂

  • default discord avatar
    notchr
    2 months ago

    Right on! I'd probably do the xml string instead of b64, but whatever works!



    Also, if the beforeOperation method works with create, then it's just a matter of how to set the data on the document to be created



    Which I do not know how to do, but may have more info on the beforeOperation docs

  • default discord avatar
    arielarial
    2 months ago

    yeah, beforeOperation is running on create. But I don't think there's a way to return data to the document. What bugs me is that the documentation for "afterChange" states that it will run on create and change


    https://payloadcms.com/docs/hooks/collections#afterchange
  • default discord avatar
    notchr
    2 months ago

    Hmm



    And it's not?



    Even with a console.log test?



    My first guess, without knowing better, is that the hook expects the doc to be returned



    you spread the doc on a new object, possible issue?



    OH



    @arielarial I think you want

    https://payloadcms.com/docs/hooks/collections#beforevalidate


    Runs before the create and update operations. This hook allows you to add or format data before the incoming data is validated server-side.
  • default discord avatar
    arielarial
    2 months ago

    hmmmmm

  • default discord avatar
    notchr
    2 months ago
    import { CollectionBeforeOperationHook } from 'payload/types';
    
    const beforeValidateHook: CollectionBeforeValidateHook = async ({
      data, // incoming data to update or create with
      req, // full express request
      operation, // name of the operation ie. 'create', 'update'
      originalDoc, // original document
    }) => {
      return data; // Return data to either create or update a document with
    }


    So modify data



    still doesn't explain why afterChange didn't fire



    which im curious about



    @jarrod_not_jared Is that normal?

  • default discord avatar
    arielarial
    2 months ago

    no, wait! 😅 afterChange is firing

  • default discord avatar
    notchr
    2 months ago

    LOL



    Also on a side note

  • default discord avatar
    arielarial
    2 months ago

    I guess my 2 problems are the same: the one about the forms not being populated in frontend / not saved in db

  • default discord avatar
    notchr
    2 months ago

    Isn't it weird the beforeValidate example imports beforeOperation but never uses it? @jarrod_not_jared



    I think that may be a typo

  • default discord avatar
    arielarial
    2 months ago

    for some reason, on create the hook is running, but it does not update the form

  • default discord avatar
    notchr
    2 months ago

    Maybe because it happens after?



    The beforeValidate seemed promising

  • default discord avatar
    arielarial
    2 months ago

    maybe that's it. I'm trying beforeChange, instead of afterChange (dont want to skip validation 😅 )



    YAS

    beforeChange

    worked 🎉



    thanks a lot, @notchr !

  • default discord avatar
    notchr
    2 months ago

    WOOT

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.