Mockando dados para criação de interface

Quando vou desenvolver uma nova tela para aplicação, nem sempre os dados vindo da API estão disponíveis. Por algumas vezes é necessário aguardar que a API esteja pronta para receber essas informações.
Então, para criar a interface enquanto aguardo a API ficar pronta, posso utilizar dados mockados no lugar dos dados reais. Assim, quando o backend me der um "ok", a interface já estará apta para receber e manipular tais informações.

É importante entender que o termo "mock" se refere a objetos que simulam dados vindos da API, ou seja, são objetos customizados que serão criados com a intenção de simular dados reais. Eles também são muito utilizados para testes automatizados.

Vamos codar

Para um exemplo usando dados mockados, vou criar uma listagem de usuários exibindo o nome.

Primeiramente criei esses dados mockados que irão simular o que receberei da API.

const USUARIOS = [
  {
    id: 1,
    nome: 'teste1'
  },
  {
    id: 2,
    nome: 'teste2'
  },
  {
    id: 3,
    nome: 'teste3'
  },
  {
    id: 4,
    nome: 'teste4'
  },
  {
    id: 5,
    nome: 'teste5'
  }
]

Agora criarei um estado na minha aplicação onde ficará armazenado esses usuários, e também criei um estado que irá controlar se os dados estão sendo carregados.

const [usuarios, setUsuarios] = useState([])
const [loading, setLoading] = useState(false)

Como toda requisição à API custa um determinado tempo, assim que é chamada a função eu altero o estado de loading para verdadeiro, informando que os dados estão sendo carregados. Após receber da API, mudo o estado de loading para falso, garantindo que o carregamento parou e já possuo os dados. Para simular esse tempo de espera da API coloquei a função dentro de um setTimeout.

function getUsuarios() {
    setLoading(true)

    setTimeout(() => {
      setUsuarios(USUARIOS)
      setLoading(false)
    }, 1000)
  }

Então para exibir esses dados, estou colocando eles dentro de uma tabela, e verifico se o estado de loading está verdadeiro, se estiver exibo a informação que está carregando, se não, é porque ja fiz a requisição e ja possuo os dados, podendo assim exibir.

return (
    <div>
      <table border='1' >
        <thead>
          <tr>
            <th>Id</th>
            <th>Nome</th>
          </tr>
        </thead>
        <tbody>
          {loading ?
            <span>carregando...</span>
            :
            usuarios.map(usuario => (
              <tr key={usuario.id}>
                <td>{usuario.id}</td>
                <td>{usuario.nome}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    </div>
  )

JSON SERVER

Outra maneira que podemos mockar dados, chegando mais perto do que seria os dados reais de que iremos utilizar na aplicação, é usando a biblioteca json-server, que serve exatamente para criar uma API Rest totalmente falsa.
(https://github.com/typicode/json-server)

Para iniciar vou primeiramente instalar o json-server
npm install -g json-server

Agora irei criar um arquivo db.json que seria os dados em que irei receber

{
    "usuarios":[
        {"id": 1, "nome": "teste1"},
        {"id": 2, "nome": "teste2"},
        {"id": 3, "nome": "teste3"},
        {"id": 4, "nome": "teste4"},
        {"id": 5, "nome": "teste5"}
    ]
}

E iniciarei o servidor, na porta 3333, tendo assim a api em execução na url http://localhost:3333/usuarios.
json-server --watch db.json --port 3333

Agora voltando para a aplicação, vou instalar a biblioteca axios para fazer as requisições.

Utilizando npm
npm install axios

Utilizando yarn
yarn add axios

E a função que irá buscar os usuários da API, irá fazer a requisição a minha api do json-server, fazendo com que quando a API real estiver pronta, basta apenas trocar pela url certa, obtendo os dados verdadeiros.

async function getUsuarios() {
    setLoading(true)

    const response = (await Axios.get('http://localhost:3333/usuarios')).data

    setUsuarios(response)
    setLoading(false)
  }

Link para o código completo: https://github.com/alanflpns/mocking-data-in-interface