Custom plugin - Entry is automatically saved when performing API call

Questions and Answers
1

Hi! I’m using Strapi v4.4.0. I have a custom plugin which tries to fetch a value from a remote source, and displaying it in the side panel in case it gets a value. If not, I render a button to re-attempt the fetch.

Everything works fine, but what I’ve found is that when I click the button to perform the API fetch, the entry is also automatically re-saved. So when I click the button, the request is performed, the “Save” button also starts spinning and then pops the notification “Saved”.

This is of course not a huge problem, but I wonder why this is. I would rather not have it happen. See the code for my component below:

import React from 'react'

import { useCMEditViewDataManager } from '@strapi/helper-plugin'
import { Typography } from '@strapi/design-system'

const GRAY = 'rgb(165, 165, 186)'

type Entry = {
  id: string
  z_d_id: string | null
  d_id: string | null
}

const CustomFields = () => {
  const [isLoading, setIsLoading] = React.useState(false)
  const [entry, setEntry] = React.useState<Entry | undefined>(
    undefined
  )
  const { initialData } = useCMEditViewDataManager()

  const dataIsLearningMaterial = initialData?.Abstract !== undefined

  React.useEffect(() => {
    fetchDepositDatabaseEntry(initialData?.vuid, initialData.versionNumber)
  }, [initialData?.vuid, initialData?.versionNumber])

  const fetchDepositDatabaseEntry = async (vuid: string, version: number) => {
    setIsLoading(true)
    try {
      const response = await fetch(<URL>)
      const matchingEntry: Entry = await response.json()
      if (!matchingEntry.z_d_id) {
        setIsLoading(false)
        return setEntry(undefined)
      }
      setEntry(matchingEntry)
    } catch (error) {
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      {dataIsLearningMaterial ? (
        <div
          style={{
            marginTop: '1rem',
            display: 'flex',
            justifyContent: 'space-between',
            color: GRAY,
            borderTop: `1px solid rgb(165, 165, 186, 0.5)`,
            paddingTop: '1rem',
            gap: '1rem',
          }}
        >
          {initialData?.vuid !== undefined && initialData?.vuid !== null ? (
            <>
              <Typography textColor="rgb(165, 165, 186)" fontWeight="bold">
                uuid
              </Typography>
              <Typography textAlign="right">{initialData.vuid}</Typography>
            </>
          ) : (
            <Typography textColor="rgb(165, 165, 186)">
              You must save a version to get a UUID
            </Typography>
          )}
        </div>
      ) : null}
      <div
        style={{
          marginTop: '1rem',
          display: 'flex',
          justifyContent: 'space-between',
          color: GRAY,
          borderTop: `1px solid rgb(165, 165, 186, 0.5)`,
          paddingTop: '1rem',
          gap: '1rem',
        }}
      >
        <Typography textColor="rgb(165, 165, 186)" fontWeight="bold">
          Deposit
        </Typography>
        {entry?.z_d_id !== undefined &&
        entry?.d_id !== undefined ? (
          <Typography textAlign="right">
            <a
              href={`<domain>/${entry.z_d_id}`}
              target="_blank"
            >
              {entry.d_id}
            </a>
          </Typography>
        ) : (
          <button
            onClick={() =>
              fetchDepositDatabaseEntry(
                initialData?.vuid,
                initialData?.versionNumber
              )
            }
          >
            {isLoading ? 'Loading...' : 'Check for link'}
          </button>
        )}
      </div>
    </div>
  )
}

export default CustomFields