Deseja começar agora? Você pode acessar o curso inteiro bem aqui.
Por que você deve aprender a reagir com o GraphQL?
O React é a biblioteca essencial para criar experiências incríveis de aplicativos com JavaScript. O GraphQL, por outro lado, é uma ferramenta que nos fornece um meio melhor e mais direto de obter e alterar nossos dados.
Esses dados podem ser de um banco de dados padrão (como usaremos em nosso aplicativo) ou como estruturas do React como o Gatsby tornaram possível, mesmo a partir de arquivos estáticos, como arquivos de remarcação. Independentemente de como é armazenado, o GraphQL melhora o trabalho com dados em nossos aplicativos.
Vamos ver como aproveitar os poderes do React e do GraphQL criando um aplicativo de blog social do início ao fim, onde você pode criar, ler, editar e excluir postagens.
Clique para acessar o curso
Quais ferramentas usaremos 🛠️
O curso intensivo é destinado a desenvolvedores familiarizados com o React (incluindo os principais React Hooks, como useState e useEffect), mas ainda não está familiarizado com o GraphQL.
O conhecimento básico do React é assumido, mas o conhecimento do GraphQL não é necessário. Abordaremos todos os principais conceitos do GraphQL que você precisa ao longo do caminho.
Durante o curso, utilizaremos as seguintes tecnologias para criar nosso aplicativo:
- Reagir (para criar nossa interface de usuário)
- GraphQL (para obter e alterar dados de maneira declarativa)
- Cliente Apollo (para nos permitir usar o React e o GraphQL juntos)
- Hasura (para criar e gerenciar nosso banco de dados API + GraphQL)
Para finalizar, usaremos o IDE CodeSandbox on-line, que nos permitirá codificar todo o aplicativo no navegador em tempo real, sem a necessidade de criar arquivos, pastas ou instalar dependências por conta própria.
Criando uma API GraphQL do zero
Para começar a trabalhar com o GraphQL, veremos como criar uma API GraphQL inteira do zero que se comunique com nosso banco de dados.
Felizmente, usando o serviço (gratuito) Hasura, esse processo é muito simples e direto. Dentro de segundos, veremos como criar e implantar uma API GraphQL completa na Web, conectada a um banco de dados Postgres que cuidará do armazenamento dos dados do aplicativo.
Clique para assistir a esta palestra
Familiarizando-se com o GraphQL
Na segunda palestra, abordaremos como escrever na linguagem GraphQL usando o console interno da nossa API chamado GraphiQL.
Primeiro, criaremos uma tabela em nosso banco de dados para todos os dados de nossas postagens. Depois disso, o Hasura criará automaticamente o consultas e mutações precisamos, quais são os nomes das operações do GraphQL que nos permitem obter e alterar dados em nosso banco de dados.
Ao longo desta lição, familiarizaremos consultas e mutações no GraphiQL, que nos permitem obter conjuntos inteiros de postagens e postagens individuais, além de criar, atualizar e excluir nossos dados individuais.
Clique para assistir a esta palestra
Conectando-se Reagir com a API GraphQL usando o Apollo Client
Agora que estamos familiarizados com o uso do GraphQL e compreendemos seus principais recursos, veremos como conectá-lo ao nosso cliente React.
A maneira como conectamos nosso aplicativo React à API GraphQL que criamos é através de uma biblioteca chamada Apollo. Vamos ver como configurar o cliente Apollo, fornecendo o ponto de extremidade do GraphQL, que aponta para a nossa API, assim:
import ApolloClient from "apollo-boost";const client = new ApolloClient({ uri: "https://react-graphql.herokuapp.com/v1/graphql"});Com nosso cliente recém-criado, temos a capacidade de executar qualquer operação do GraphQL por meio do React. Para fazer isso, no entanto, precisamos passar nosso cliente para todo o nosso, para todos os nossos componentes do React. Fazemos isso com a ajuda do provedor Apollo, como você pode ver abaixo:
Clique para assistir a esta palestra
Obtendo postagens com useQuery
Após configurar nosso cliente, veremos como executar diferentes operações GraphQL com eles, usando alguns ganchos React especiais que acompanham o pacote @apollo/react-hooks.
O gancho que nos permite consultar dados com o GraphQL é chamado useQuery. Com isso, veremos primeiro como obter e exibir todos os nossos dados de postagem em nossa página inicial. Além disso, aprenderemos como escrever nossas consultas GraphQL diretamente em nossos arquivos JavaScript com a ajuda de uma função especial chamada gql.
import React from "react";import { useQuery } from "@apollo/react-hooks";import { gql } from "apollo-boost";export const GET_POSTS = gql` query getPosts { posts { id title body createdAt } }`;function App() { const { data, loading } = useQuery(GET_POSTS); if (loading) return Loading...; if (data.posts.length === 0) return All Posts
New Post {data.posts.map(post => ( Criando e editando novas postagens com useMutation
Depois disso, veremos como criar novas postagens com o useMutation gancho. Para fazer isso, veremos como trabalhar com variáveis do GraphQL para transmitir nossos valores dinâmicos de mutação que serão alterados a cada execução.
A seguir, veremos como editar nossas postagens. Para fazer isso, precisaremos buscar uma postagem individual e exibi-la em nosso formulário, para que nosso usuário possa fazer alterações nos dados. Em seguida, precisaremos executar uma mutação que executará a atualização, com base no ID das postagens.
Clique para assistir a esta palestra
Lidar com carregamento e erros
Na palestra a seguir, abordaremos alguns padrões essenciais para lidar com o processo de carregamento de nossos dados.
É importante fazer isso quando executamos uma mutação, para garantir que não submetamos nossos formulários várias vezes enquanto a mutação está sendo executada. Também veremos como lidar com erros no caso de nossa mutação não ser executada corretamente.
Clique para assistir a esta palestra
Excluindo postagens
Por fim, abordaremos como excluir postagens do nosso aplicativo. Primeiro, confirmaremos que o usuário deseja realmente excluir a postagem que eles fizeram e depois executar a mutação.
Além disso, veremos como atualizar nossa interface do usuário em resposta a mutações com os úteis refetch função que Apollo nos dá. Isso nos permitirá reexecutar uma consulta sob demanda. Nesse caso, faremos isso após a mutação de exclusão ter sido realizada com êxito.
Clique para assistir a esta palestra
Assista ao curso agora 📺
O React e o GraphQL estão no centro de toneladas de aplicativos Web e móveis poderosos e nunca houve um momento melhor para aprender os dois.
Faça o curso e, dentro de uma hora, você aprenderá os principais conceitos que aumentarão significativamente suas habilidades de desenvolvedor e fornecerão as principais informações para criar seus próprios projetos React e GraphQL!
Clique para assistir ao curso
