How to show or display store record from Storage API via forge UI Kit

Am trying to display records from Forge storage but it throws error

There was an error invoking the function - Cannot read property ‘length’ of null


TypeError: Cannot read property 'length' of null
    at Object.App [as type] (index.js:12930:56)
    at index.js:29411:36
    at async asyncMap (index.js:29346:24)
    at async index.js:29367:29
    at async asyncMap (index.js:29346:24)
    at async index.js:29429:23
    at async index.js:29297:31

Here is the coding

import api, { route } from "@forge/api";
import ForgeUI, { render, Fragment, Text, IssuePanel,Button, ButtonSet, useProductContext, useState, Component, useEffect} from "@forge/ui";

import { storage} from '@forge/api';

const App = () => {
 
const [data, setData] = useState(null);

//await storage.set('rahul_key', {name: 'rahul', email: 'rahul@gmail.com' });
//const data = await storage.get('rahul_key');


const data = await storage
  .query()
  .where('key', startsWith('rahul_key'))
  .getMany();

console.log(data);	
  setData(data);
    return data;
	  
  return (
    <Fragment>
	
      <Text>Display records </Text>
	  
	  
	   {data.length ? data.map((i, v) => (
          <Text key={v}>
            <Text >

<Text>Name:  {v.name}</Text>
<Text>Email:  {v.email}</Text>

           </Text></Text>
        )) : <Text>No data stored yet...</Text>}

  </Fragment>
  );
};

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

Without running your code further there seems to be a error. You have declared the variable data twice. Can you fix that and then we’ll try again? Also, I don’t think you can await in that context.

@rmassaioli thanks for getting back to me. This is what I tried again but it shows or displays No data stored yet. Does it mean that name for rahul and its email address is not saved first. what is the issue with the code below. can you please help me with a working code. Thanks

import api, { route } from "@forge/api";
import ForgeUI, { render, Fragment, Text, IssuePanel,Button, ButtonSet, useProductContext, useState, Component, useEffect} from "@forge/ui";

import { storage, fetch, startsWith } from '@forge/api';

//const data = '';
const fetchStoredData = async (contentId) => {	
await storage.set('rahul_key', {name: 'rahul', email: 'rahul@gmail.com' });
//const data = await storage.get('rahul_key');



const data = await storage
  .query()
  .where('key', startsWith('rahul_key'))
  .getMany();

console.log(data);	
 // setData(data);
    return data;
	
}




const App = () => {
 
const context = useProductContext();
  const [records] = useState(async () => await fetchStoredData(context.contentId));
  console.log(`Number of records on this page: ${records.length}`);


	  
  return (
    <Fragment>
	
      <Text>Display records {records.length}</Text>
	  
	  
	   {records.length ? records.map((i, v) => (
          <Text key={v}>
            <Text >

<Text>Name:  {v.name}</Text>
<Text>Email:  {v.email}</Text>

           </Text></Text>
        )) : <Text>No data stored yet...</Text>}

  </Fragment>
  );
};

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

@EsedoFredrick is there any reason you need to query instead of just getting the data from the specific key?

You example is .where('key', startsWith('rahul_key')), but that is actually the full key.

The following code will get your data, but it will be an object, not an array so .length will not work. If you console log records then you should see the data.

const data = await storage.get('rahul_key');

Thanks for response so far. @danielwinterw nothing is showing or displaying in the console. it seems that Forge UI KIT does not works with console.log(‘Your info goes here’). my chrome browser developer console is empty. Is there some configurations that is need to be done on my own end. Something is really wrong. Is either the data is not saved properly via Storage API as per code above. Can you point me with a tutorial on Forge with Console.log working or anything else. please i need your help. Thanks and waiting for your response.

@EsedoFredrick Forge UI kit executes on the server side. Logs do not appear in the browser console.

If you run forge logs you can see logs from your development environment. If you want to see them in realtime, you can run forge tunnel which will show all console output in your terminal when you run the app.

1 Like