[Rick and Morty Characters Wiki] — Parte 2.4— Configuração — Axios

Photo by Sam Balye on Unsplash

Caso tenha caído aqui por acidente, essa é a parte 1 de uma serie de posts para implementação de uma aplicação inspirada no post Rick and Morty Character Wiki do Joy Shaeb:

0 — Rick and Morty Character Wiki

Começamos instalando o Axios no projeto:

yarn add axios

Em nosso projeto vamos criar um novo arquivo chamado index.ts no caminho src/services/api/index.ts:

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://rickandmortyapi.com/api',
});

export default api;

Para fins de teste, vamos alterar nosso arquivo src/screens/Characters/index.tsx com o seguinte código:

import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import api from '~/services/api';
import { theme } from '~/styles';

const Characters = () => {
  const [characters, setCharacters] = useState('');

  useEffect(() => {
    api
      .get('/character')
      .then(({ data }) => setCharacters(JSON.stringify(data.results[0])));
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ color: theme.colors.blue }}>{characters}</Text>
    </View>
  );
};

export default Characters;

Dessa forma teremos:

Configuração do axios é simples, vamos agora adicionar o React Query ao projeto, continua na parte 2.5.

2.5 — React Query

GitHub - WallysonGalvao/rickmortywiki at v1

Introdução