Understanding forge/bridge

Hi everyone, I need a some help on understanding forge/bridge. I am trying to get data from my forge storage layer but it is coming back as undefined. This is how I tried to set the data in my state on the frontend:

if(!loading) {
    setLoading(true);
    invoke('get-all-data').then(setData)
    console.log(companies)
  }

I would just like some clarification on how this process works as the documentation is pretty limited on this.

It’s hard to tell for sure what you are looking for here without more of the code in question – there seems to be some interesting parts missing from your example. If setData is what sets the companies variable to an interesting value, though, then you may need to go read up on Promises in JavaScript. In this example, the setData function won’t be invoked until after your console.log(companies) line runs.

1 Like

Oh I forgot to change console.log(companies) to console.log(data), my bad.

I think I should also mention that I put mock data in my forge storage layer, just to see if anything would come back

Ok, well I think my comment still applies. See if this prints anything useful for you instead:

  if(!loading) {
    invoke('get-all-data').then(data => {
      console.log(data);
    });
  }

I see - that makes sense thank you, I need to refresh my promise skills. Okay so I did that and now im wondering if I am setting my mock data in my storage layer correctly or not, this is how I did it- the data contains generated data using the Faker npm package:

resolver.define('get-all-data', ({context}) => {
  let mock_data = [
    {
      name: company.companyName(),
      faxNumber: phone.phoneNumber(),
      address: address.streetName(),
      zipCode: address.zipCode(),
      city: address.city(),
      state: address.state(),
      country: address.country(),
      keyAccounter: null,
      website: internet.url(),
      twitter: 'https://twitter.com',
      facebook: 'https://facebook.com',
      linkedin: 'https://linkedin.com',
    }
    ]
    return mock_data;
  });

Do you think this should be fine in terms of making the invoke work?

Hey everyone, so my colleague helped me find out the solution to this. Storing the mock data like that works fine, I just was invoking incorrectly. This is how he did this:

export default function Data() {
  const [data, setData] = useState([]);
  const [filter, setFilter] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    (async () => {
      setLoading(true);
      try {
        await invoke('get-all-data').then((returnedData) => {
          let mockData = returnedData.map((data) => {
            if (data.keyAccounter) {
              try {
                data.keyAccounter = JSON.parse(data.keyAccounter);
              } catch (e) {}
            }
            return data;
          });
          setData(mockData);
        });
       
      } catch (e) {
        console.log("Caught an error");
        console.log(e);
      }
      setLoading(false);
    })();
  }, [filter]);

Hope this helps anyone who ran into this same issue!