Cannot refresh record on button click via Forge

The Code below successfully displays record from Storage API via Forge

  const fetchRec = async () => {
const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
return data.results;
 };


const App = () => {
const [ projects ] = useState(fetchRec);
  return (
    <Fragment>

// display or map projects records here
<Button text="Refresh Records" onClick={async () => { await reloadRec();}} />
 </Fragment>
  );
}

Here is my Issue.
I need to refresh the Records when new data is inserted.
So I implemented the code below. when I click on refresh Records button, the new added record is not updated

<Button text="Refresh Records" onClick={async () => { await reloadRec();}} />
 async  function reloadRec() {
       fetchRec().then(projects);		
  }

Here is the entire Codes

const fetchRec = async () => {
  const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
  return data.results;
};
async function reloadRec() {
  fetchRec().then(projects);
}

const App = () => {
  const [projects] = useState(fetchRec);
  return (
    <Fragment>
      // display or map projects records here
      <Button text="Refresh Records" onClick={async () => { await reloadRec(); }} />
    </Fragment>
  );
}

Hi @NkemjikaGwacham,

You’ll need to use the second return value of useState to update the projects.

It should look something like…

  const [projects, setProjects] = useState(fetchRec);
  return (
    <Fragment>
      // display or map projects records here
      <Button text="Refresh Records" onClick={async () => {
        const newRecords = await fetchRec();
        setProjects(newRecords);
      }}/>
    </Fragment>

https://developer.atlassian.com/platform/forge/ui-kit-hooks-reference/#function-signature

2 Likes

Thanks

Thanks alot

1 Like