3. Obtener Data de la Chain

En el tercer capítulo del tutorial sobre cómo construir una dapp end-to-end en Aptos, aprenderás a hacer fetch de la data desde la chain.

Nuestra lógica de UI depende de si la cuenta conectada ha creado una lista de tareas (todo list). Si la cuenta ya creó una, nuestra app debería mostrar esa lista; si no, la app debería mostrar un botón ofreciendo la opción de crear una nueva.

Para lograr esto, primero necesitamos verificar si la cuenta conectada tiene un recurso TodoList. En nuestro smart contract, cada vez que alguien crea una lista, generamos y asignamos un recurso TodoList a su cuenta.

Para traer data de la chain, podemos usar el Aptos TypeScript SDK. El SDK nos provee clases y funciones para interactuar y hacer queries a la chain de Aptos fácilmente.

Para empezar:

Detén el servidor local si está corriendo y ve al archivo App.tsx.

Importa la wallet desde el provider del wallet adapter de React:

import { useWallet } from "@aptos-labs/wallet-adapter-react";

Extrae el objeto account del wallet adapter:
```
function App() {
  const { account } = useWallet();
}
```
El objeto account es null si no hay ninguna cuenta conectada; cuando se conecta una cuenta, el objeto account contiene la información de la misma, incluyendo su address.
Configura los hooks y el state de React:
- Importa useEffect y useState usando:
```
import { useState, useEffect } from "react";
```
- Crea un state local para rastrear si la cuenta tiene una todo list y añade un hook useEffect para hacer fetch de la data cuando la cuenta cambie:
```
function App() {
  const [accountHasList, setAccountHasList] = useState<boolean>(false);
  useEffect(() => {
    fetchList();
  }, [account?.address]);
}
```

Importa las dependencias requeridas:

Importa la variable MODULE_ADDRESS usando:

import { MODULE_ADDRESS } from "./constants";

Importa aptosClient usando:

import { aptosClient } from "./utils/aptosClient";

Crea la función fetchList:

const fetchList = async () => {
  if (!account) return [];
  const moduleAddress = MODULE_ADDRESS;
  try {
    const todoListResource = await aptosClient().getAccountResource(
      {
        accountAddress:account?.address,
        resourceType:`${moduleAddress}::todolist::TodoList`
      }
    );
    setAccountHasList(true);
  } catch (e: any) {
    setAccountHasList(false);
  }
};

Actualiza la UI basada en el state accountHasList:
- Importa el componente Button usando:
```
import { Button } from "./components/ui/button";
```
- Actualiza la UI basándote en el state accountHasList:
```
return (
  <>
    <TopBanner />
    <Header />
    <div className="flex items-center justify-center flex-col">
      {!accountHasList && (
        <div className="flex items-center justify-center flex-col">
          <Button>Add new list</Button>
        </div>
      )}
    </div>
  </>
);
```
La función aptosClient().getAccountResource() espera una account address que contenga el recurso que estamos buscando y una representación en string de un tipo de struct de Move on-chain:
- account address - es la cuenta conectada actualmente (la obtenemos del objeto account de la wallet).
- Sintaxis del string del tipo de struct de Move:
  - La address de la cuenta que posee el módulo Move
  - El nombre del módulo donde vive el recurso = todolist
  - El nombre del recurso = TodoList
Si el request es exitoso y existe un recurso para esa cuenta, queremos setear nuestro state local a true; de lo contrario, lo seteamos a false.

Ahora tenemos un botón Add new list que aparece solo si la cuenta no tiene una lista creada.
Inicia el servidor local con npm run dev. Deberías ver el botón Add new list.

A continuación, entendamos cómo crear una nueva lista enviando data a la chain en el capítulo 4.