InlineImage block only updates to correct image on page refresh

Gatsby
#1

Hi! Was updating an old project with the new Media Manager api (which is awesome btw!) and it seems as though the rendered image from my <InlineImage> block is a step behind the actual state. To get the current image you have to refresh the page. Possibly related to this issue? Surface-wise at least, the behavior is the same.

  • The JSON data updates on the backend
  • Getting a Warning: Each child in a list should have a unique "key" prop. in console each time I click image to update file. (Not sure if even related, but figured I’d mention)
  • Code from my block component below. Am I passing previewSrc the correct way?

cover.js

function Cover({ index, ...data }) {
  return (
    <div className={Styles.container}>
      <div className={Styles.cover}>
        <InlineImage
          name="cover_image"
          parse={media => `../assets/${media.filename}`}
          uploadDir={() => "./content/assets/"}
          previewSrc={(src, fieldPath, formValues) => {
            const preview =
            formValues.jsonNode.blocks[index].cover_image.childImageSharp
                .fluid
            return preview
          }}
          focusRing={false}
        >
          {props => (
            <Img
              fluid={props.src || data.cover_image.childImageSharp.fluid}
              alt="Text Cover"
            />
          )}
        </InlineImage>
      </div>
    </div>
  )
}

export const coverBlock = {
  Component: ({ index, data }) => (
    <BlocksControls
      index={index}
      focusRing={{ offset: 0, borderRadius: 0 }}
      insetControls
    >
      <Cover index={index} {...data} />
    </BlocksControls>
  ),
  template: {
    label: "Cover",
    defaultItem: {
      _template: "cover",
      cover_image: "../assets/default.jpg",
    }
  }
}