Skip to main content

Getting the number from backend service

For frontend Mify provides two templates:

Let's edit the index page and add call to our backend:

import React, {useEffect, useState} from 'react';
import { useAppSelector } from './app/hooks';
import Context from './generated/core/context';
import './App.css';

function App() {
    var [number, setNumber] = useState('');
    var ctx = useAppSelector((rootState) => rootState.mifyState.value)
    console.log(ctx.clients)
    useEffect(() => {
        const callBackend = async (ctx: Context) => {
          var response = await ctx.clients.countingBackend().counterNextGet()
          setNumber(response.number)
        }
        callBackend(ctx)
    }, [ctx])
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Counter: {number}
        </p>
      </header>
    </div>
  );
}

export default App;

We're added call to backend to the fetch stage and after receiving the number we add it to the component data which can be accesses in a template.

Now we're ready for final testing.