Getting the number from backend service

For frontend Mify provides two templates:

• React with Typescript and Redux.
• NuxtJS template which is based on Vue and also provides support for Server Side + Client Side rendering. Here is a good description of page loading lifecycle: https://nuxtjs.org/docs/concepts/nuxt-lifecycle.

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

React

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;

NuxtJS

<template>
  <div>
  <Sample/>
  Counter: {{counter}}
  </div>
</template>

<script>

export default {
  name: 'Index',
  data () {
    return {
      counter: 0,
    }
  },
  async fetch() {
    let countingBackend = this.$mifyContext.clients.countingBackend();
    try {
        var resp = await countingBackend.counterNextGet();
        this.counter = resp.number;
    } catch (e) {
        console.log(e);
    }
  }
}
</script>

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.