Storage-api retrieving data

Forge
1

Hi, I want to retrieve data using the storage API, but it doesn’t work, and when I run the forge logs command, I get this error :

ERROR 2023-07-27T12:09:48.503Z edb62ba1-a4ba-4cc7-b4ca-927dd1caae36 Cannot convert a Symbol value to a string
TypeError: Cannot convert a Symbol value to a string
at index.js:33802:90
at asyncMap (index.js:33716:30)
at index.js:33799:29
at async asyncMap (index.js:33716:24)
at async index.js:33737:29
at async index.js:33262:31

What modifications need to be made to correct this code?

import { storage } from '@forge/api';
import ForgeUI, { Fragment, Text, GlobalSettings, useEffect, useState, render } from '@forge/ui';

const App = () => {
  const [levelsData, setLevelsData] = useState([]);

  const createData = async () => {
   const dat1= await storage.set('level1', {
      id: 1,
      name: "Top Secret",
      color: "#FDFEFE",
      backgroundColor: "#E74C3C",
      description: "The description of the Top Secret Level"
    });
   const dat2= await storage.set('level2', {
      id: 2,
      name: "Secret Level",
      color: "#FDFEFE",
      backgroundColor: "#A93226",
      description: "The description of the Secret Level"
    });
    const dat3=await storage.set('level3', {
      id: 3,
      name: "Confidential",
      color: "#FDFEFE",
      backgroundColor: "#5B2C6F",
      description: "The description of the Confidential Level"
    });
    const list = [dat1, dat2, dat3]
     return list;
    
   
  };
   const getData = async()=>{
     await createData();
   
      const data1 = await storage.get('level1')
      const data2 = await storage.get('level2')
      const data3 = await storage.get('level3')
  
    const dataList = [data1, data2, data3];
    if(dataList){
      setLevelsData(dataList);

    }

   }
  useEffect(() => {
    getData();
  }, []);

  return (
    <Fragment>
      {levelsData.map((data) => (
        <Text>{data.name}</Text>
      ))}
    </Fragment>
  );
};

export const run = render(
  <GlobalSettings>
    <App />
  </GlobalSettings>
);

Thanks.

2

Hi @Mariem, is there traceId which is associated with this operation which I could look to figure out?

3

Hi @Mariem,

It might be unrelated, but you are doing UI kit, its API looks a lot like React, but it isn’t 100% like React. In your case, you need to write:

  useEffect(async () => {
    await getData();
  }, []);

Otherwise, the getData() function won’t be awaited.

Actually, I think it can be simplified into:

  useEffect(getData, []);

Or even better, but not tested. As UI kit useState() can take a Promise as initial value (https://developer.atlassian.com/platform/forge/ui-kit-hooks-reference/#arguments), that allow you to do to something like:

const App = () => {

  const createData = async () => {
    const dat1= await storage.set('level1', {
      id: 1,
      name: "Top Secret",
      color: "#FDFEFE",
      backgroundColor: "#E74C3C",
      description: "The description of the Top Secret Level"
    });
    const dat2= await storage.set('level2', {
      id: 2,
      name: "Secret Level",
      color: "#FDFEFE",
      backgroundColor: "#A93226",
      description: "The description of the Secret Level"
    });
    const dat3=await storage.set('level3', {
      id: 3,
      name: "Confidential",
      color: "#FDFEFE",
      backgroundColor: "#5B2C6F",
      description: "The description of the Confidential Level"
    });
    const list = [dat1, dat2, dat3]
    return list;
  };

  const getData = async()=>{
    await createData();

    return Promise.all([
      storage.get('level1'),
      storage.get('level2'),
      storage.get('level3'),
    ])
  }

  const [levelsData, setLevelsData] = useState(getData);

  // ...
}
2 Likes
4

Hi @SilvreLestang ,

Thank you very much.

5

Hi!
I know it’s been a while, but I’ve written a blog that talks about using hooks (useState and useEffect) in Forge, so if you’d like to learn more about using hooks in Custom UI, UI Kit and UI Kit 2 why not check it out? Atlassian Developer Blog: A deeper look at hooks in Forge.
Cheers!
Mel