O Curso React + GraphQL 2020 Crash

O Curso React + GraphQL 2020 Crash

30 de June, 2020 0 By António César de Andrade
Click to rate this post!
[Total: 0 Average: 0]


Você já ouviu falar muito sobre o uso do React com o GraphQL, mas não sabe como combiná-los para criar aplicativos incríveis? Neste curso intensivo, você aprenderá como fazer isso criando um aplicativo de blog social completo.

Dentro de uma tarde, você obterá as principais habilidades para criar seus próprios projetos React e GraphQL.

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 cursoClique 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 acessar o cursoClique 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 acessar o cursoClique 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 acessar o cursoClique 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 ; 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 acessar o cursoClique 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 acessar o cursoClique 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 acessar o cursoClique 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 acessar o cursoClique para assistir ao curso



Fonte