O autor do material, cuja tradução publicamos hoje, diz que a missão dos desenvolvedores do Apollo Client é tornar essa ferramenta a solução mais moderna e conveniente para gerenciar o estado dos aplicativos React. A comunidade React está desenvolvendo e dominando maneiras novas e eficazes de desenvolver interfaces com o usuário. Os criadores do Apollo Client se esforçam para garantir que seu projeto ofereça suporte aos mais relevantes do mundo React. Seguindo essa tradição, os desenvolvedores do Apollo Client estão apresentando uma nova versão do sistema equipado com o suporte do React
hook .
Ganchos foram introduzidos no
React 16.8 . Este é um novo mecanismo que permite criar componentes com estado sem precisar lidar com problemas específicos dos componentes baseados em classe. Agora, o Apollo Client inclui três ganchos que podem ser usados em aplicativos - em todos os locais onde componentes de ordem superior ou mecanismos de suporte de renderização são usados. Esses são os ganchos useQuery,
useMutation e
useSubscription . Esses ganchos são fáceis de aprender, eles têm muitas vantagens sobre a API pré-existente. Em particular, isso diz respeito à redução do tamanho do pacote de aplicativos e à redução da quantidade de código padrão.
Introdução
Se você deseja criar um novo projeto Apollo, recomendamos instalar o seguinte pacote depois de configurar sua instância do Apollo Client:
npm install @apollo/react-hooks
Este pacote exporta o componente
ApolloProvider , usado para conectar o Apollo Client a um aplicativo React. Da mesma forma, o trabalho foi organizado usando a API antiga.
Se você já possui um projeto que usa o Apollo, significa que você tem várias maneiras de mudar para ganchos. A escolha de um método específico depende de como exatamente você deseja fazer a transição. Detalhes sobre isso podem ser encontrados
aqui .
Por que os ganchos são o futuro?
O Apollo Client ainda suporta APIs baseadas em componentes de ordem superior e objetos de renderização. Essas APIs estarão presentes no sistema por algum tempo. Acreditamos que, no futuro, os ganchos serão o melhor mecanismo para carregar dados usando o Apollo Client. Embora aqueles que já usam o Apollo não precisem mudar para ganchos no momento, eles devem usar ganchos para novos componentes. Esta recomendação tem vários motivos que consideraremos agora.
Using Ao usar ganchos, você precisa de menos código usado para trabalhar com dados
Ganchos reduzem a quantidade de código padrão usado para trabalhar com dados. Isso leva a uma redução no tamanho dos componentes e ao fato de que esses componentes são mais fáceis de entender. Como resultado, os desenvolvedores não precisarão mais investigar como os componentes de ordem superior são organizados ou analisar a lógica complexa dos objetos de renderização. Para carregar dados, basta chamar a única função
useQuery :
const LAST_LAUNCH = gql` query lastLaunch { launch { id timestamp } } `; export function LastLaunch() { const { loading, data } = useQuery(LAST_LAUNCH); return ( <div> <h1>Last Launch</h1> {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>} </div> ); }
Aqui é
useQuery carregamento de dados usando o gancho
useQuery Apollo Client
useQueryDê uma olhada
neste aplicativo tutorial, onde você pode ver um exemplo de uso de ganchos do Apollo Client.
Mutações múltiplas
Quando você executa várias mutações em um único componente, o uso de componentes de ordem superior ou o mecanismo de acessórios de renderização pode levar a códigos difíceis de entender. O uso do API render prop, a construção de estruturas que consistem em componentes de
Mutation incorporados um no outro, fornece uma falsa sensação de código estruturado e sua hierarquia clara. O novo gancho
useMutation contorna esse problema completamente. O fato é que seu uso é reduzido a uma simples chamada de função. O exemplo a seguir mostra como várias mutações e consultas podem interagir entre si. Tudo isso acontece dentro do mesmo componente:
function Message() { const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE); const [deleteMessage] = useMutation(DELETE_MESSAGE); const { data } = useQuery(GET_MESSAGE); return ( <div> <p> {loading ? 'Loading ...' : `Message: ${data && data.message ? data.message.content : ''}`} </p> <p> <button onClick={() => saveMessage()}>Save</button> <button onClick={() => deleteMessage()}>Delete</button> </p> </div> ); }
O gancho
useMutation é usado
useMutation . Você pode ver várias mutações em ação
aqui . Este aplicativo de amostra também contém um componente semelhante criado usando adereços de renderização. Isso oferece a oportunidade de comparar esse componente com o criado usando ganchos.
Type Suporte aprimorado ao TypeScript
Não é segredo que somos grandes fãs de TypeScript. Os recursos dos novos ganchos vão bem com as definições de tipo automáticas geradas pela Apollo CLI. Isso facilita muito a gravação de código de tipo seguro para componentes React. Veja como é o carregamento de dados usando os ganchos useQuery e TypeScript:
import { RocketData, RocketVars } from './types'; const GET_ROCKET_INVENTORY = gql` query getRocketInventory($year: Int!) { rocketInventory(year: $year) { id year } } `; export function RocketInventoryList() { const { loading, data } = useQuery<RocketData, RocketVars>( GET_ROCKET_INVENTORY, { variables: { year: 2019 } } ); return (); }
Os ganchos Apollo e TypeScript facilitam o desenvolvimento de componentes React fortemente tipificados.
Aprimoramentos adicionais do Apollo Client para desenvolvedores do React
Embora esta versão do Apollo se concentre em novos ganchos, podemos falar sobre alguns novos recursos mais interessantes.
▍ Redução do tamanho do pacote em 50%
Enquanto o tamanho do pacote gzip minificado e compactado react
react-apollo@2 é de
10,6 Kb , o tamanho do pacote react
react-apollo@3 é de apenas
7,8 Kb . Além disso, se o pacote
@apollo/react-hooks for suficiente para você, o tamanho do pacote será reduzido para apenas
5,1 Kb . Isso proporciona economia de 50% em comparação com o
react-apollo@2 .
Execution Execução atrasada da consulta
O
useQuery executa sua consulta no momento em que a função é chamada. Mas este é precisamente o comportamento do sistema que nem sempre é necessário. Imagine, por exemplo, um campo para inserir uma consulta de pesquisa que forneça avisos ao usuário. Pode ser necessário exibir um componente com esse campo pronto para aceitar o que o usuário digita. Mas, ao mesmo tempo, a execução da consulta no servidor de pesquisa será adiada até o momento em que o usuário começar a inserir algo no campo. Para implementar esse cenário, você pode usar o gancho
useLazyQuery , que retorna uma tupla com a função
execute na segunda posição:
const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY);
A solicitação não será executada até você chamar a função de
execute . Nesse ponto, o componente será renderizado novamente e o esquema de execução de consulta usual implementado usando
useQuery será aplicado.
DocumentationNova documentação da API
Atualizamos a
documentação do Apollo Client adicionando informações de gancho. Recomendamos que eles sejam usados por aqueles que acabaram de começar a trabalhar com nosso sistema. No entanto, apesar disso, não removemos as informações da documentação sobre como trabalhar com componentes de ordem superior e com o mecanismo de renderização. Nos exemplos de código que podem ser encontrados na documentação, agora você pode usar o novo menu suspenso que permite alternar entre o código que demonstra a solução para o mesmo problema usando a abordagem que o leitor mais gosta.
Várias opções de código disponíveis na documentação
Sumário
Os criadores do Apollo Client dizem que o que mais gostam no React é que a equipe principal de desenvolvedores desta biblioteca e a comunidade de entusiastas em torno dela estão constantemente se esforçando para melhorar a usabilidade do React do ponto de vista do programador. A aparência de ganchos, recomendados para todo mundo tentar, é um dos exemplos mais brilhantes de tal aspiração.
Esperamos que os ganchos do React introduzidos no Apollo Client sejam atraentes para aqueles que usam este projeto para desenvolver seus aplicativos.
Caros leitores! Você usa o Apollo Client?
