Usando GraphQL e Apollo Client para Consumir APIs no React

Ao desenvolver aplicativos React, uma das necessidades mais comuns é integrar APIs externas para consumir dados. Embora REST seja a abordagem tradicional para essas integrações, GraphQL tem ganhado popularidade devido à sua flexibilidade e eficiência. Neste artigo, vamos explorar como usar GraphQL e Apollo Client para consumir APIs no React de forma eficiente, aproveitando suas vantagens para otimizar a comunicação entre o cliente e o servidor.

O que é GraphQL?

GraphQL é uma linguagem de consulta para APIs e um runtime para executar essas consultas. Ao contrário das APIs REST, onde os endpoints são fixos e a estrutura de dados é definida pelo servidor, o GraphQL permite que o cliente especifique exatamente quais dados precisa. Isso reduz a quantidade de dados transferidos e melhora a performance, especialmente em aplicativos móveis ou de alto tráfego.

Por que Apollo Client?

Apollo Client é uma das bibliotecas mais populares para consumir APIs GraphQL no React. Ela oferece uma série de funcionalidades, como cache de dados, gerenciamento de estado local, e integração com o React, que facilitam o uso de GraphQL em projetos modernos. A biblioteca ajuda a simplificar a comunicação entre o frontend e o backend, além de otimizar o gerenciamento de dados.

Instalando Apollo Client

Para começar a usar o Apollo Client no seu projeto React, você precisa instalar algumas dependências. Abra seu terminal e execute:

npm install @apollo/client graphql

Depois de instalar o Apollo Client, você precisa configurá-lo para conectar seu aplicativo React à API GraphQL.

Configurando Apollo Client no React

A configuração básica do Apollo Client é simples. Primeiro, crie uma instância do Apollo Client, especificando o endpoint da API GraphQL. Em seguida, envolva seu componente raiz com o ApolloProvider, que fornecerá o cliente Apollo para todo o aplicativo.

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://sua-api-graphql.com/graphql',
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <SuaAplicacao />
    </ApolloProvider>
  );
}

export default App;

Este é o primeiro passo para começar a consumir APIs no React usando GraphQL e Apollo Client.

Consultas GraphQL no React com Apollo Client

Agora que o Apollo Client está configurado, você pode começar a realizar consultas GraphQL no seu aplicativo. Para isso, use o hook useQuery do Apollo Client. Esse hook simplifica a execução de consultas e a gestão de estados, como carregamento e erro.

Aqui está um exemplo de como fazer uma consulta GraphQL:

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_USUARIOS = gql`
  query {
    usuarios {
      id
      nome
      email
    }
  }
`;

function ListaUsuarios() {
  const { loading, error, data } = useQuery(GET_USUARIOS);

  if (loading) return <p>Carregando...</p>;
  if (error) return <p>Erro: {error.message}</p>;

  return (
    <ul>
      {data.usuarios.map((usuario) => (
        <li key={usuario.id}>
          {usuario.nome} - {usuario.email}
        </li>
      ))}
    </ul>
  );
}

export default ListaUsuarios;

Mutations para Manipulação de Dados

Além das consultas (queries), o GraphQL também permite fazer mutations, que são usadas para criar, atualizar ou deletar dados. O Apollo Client oferece o hook useMutation para facilitar esse processo. Veja um exemplo de como usar mutations para adicionar um novo usuário:

import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';

const ADICIONAR_USUARIO = gql`
  mutation AdicionarUsuario($nome: String!, $email: String!) {
    adicionarUsuario(nome: $nome, email: $email) {
      id
      nome
      email
    }
  }
`;

function AdicionarUsuario() {
  const [nome, setNome] = useState('');
  const [email, setEmail] = useState('');
  const [adicionarUsuario] = useMutation(ADICIONAR_USUARIO);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await adicionarUsuario({ variables: { nome, email } });
      setNome('');
      setEmail('');
    } catch (error) {
      console.error('Erro ao adicionar usuário:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={nome}
        onChange={(e) => setNome(e.target.value)}
        placeholder="Nome"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <button type="submit">Adicionar Usuário</button>
    </form>
  );
}

export default AdicionarUsuario;

Gerenciamento de Estado com Cache

Uma das grandes vantagens de usar Apollo Client no React é o gerenciamento de cache. O Apollo Client armazena os dados das consultas e mutations em cache, evitando a necessidade de refazer as requisições para os mesmos dados. Você pode configurar o cache para personalizar o comportamento, como invalidar dados ou atualizar o cache manualmente.

Conclusão

Usando GraphQL e Apollo Client para consumir APIs no React, você pode criar aplicativos mais eficientes e fáceis de manter. A combinação oferece flexibilidade para obter exatamente os dados necessários, reduzir a sobrecarga de rede e melhorar a performance geral da aplicação. A integração do Apollo Client com o React é simples e poderosa, permitindo um fluxo de dados otimizado e sem complicação.