Buscando dados com o Fetch (Parte 1)

Para coletar dados, utilizaremos uma API que foi desenvolvida na disciplina de Back-end. Porém, poderia ser qualquer API ou ferramenta que exporte dados.

Iniciando novo projeto

Inicie um novo projeto através do comando abaixo:

expo init ProjectName

Buscando dados

Para buscar os dados na API, utilizaremos o fetch. Primeiramente, temos de criar um estado para armazenar as informações.

Veja um exemplo abaixo:

  const [posts, setPosts] = useState([])

Criado o estado, precisamos agora implementar uma função que carregue os dados da API. Veja essa implementação abaixo:

  const getPostsNaAPI = async () => {
    try {
      const response = await fetch('https://dev-backend-imd.herokuapp.com/api/posts');
      const posts = await response.json()
      setPosts(posts.posts)
    } catch (error) {
      setPosts([])
      alert('Falha ao acessar servidor. Tente novamente mais tarde!')
    }
  }

Após criada a função, precisamos chamá-la em algum momento para que os dados sejam carregados. Para isso utilizaremos o useEffect, que reage a mudanças de estados.

Veja o uso:

useEffect(() => {
    getPostsNaAPI()
  }, [])

Utilizando os dados no aplicativo

Agora que já temos os dados carregados e armazenados, podemos utilizá-los no aplicativo. Veja abaixo um exemplo de uso em um componente:

<View style={styles.container}>
      <Text>{posts.length > 0 ? posts[0].title : 'Não possui postagens carregadas'}</Text>
      <StatusBar style="auto" />
</View>