Primeiras aulas do curso GraphQL parte 3: integrando com sua aplicação

GraphQL parte 3: integrando com sua aplicação

Iniciando o servidor GraphQL - Introdução

Olá, tudo bem com você? Eu sou a Juliana e vou te acompanhar durante este curso de Graphql. Nós iremos entrar mais fundo no Graphql e entender como integramos ele no nosso frontend. No nosso caso, estamos usando o react na nossa aplicação. Atualmente consumimos uma API rest e iremos migrar dela para uma API Graphql.

No final do curso, teremos terminado nossos clientes e feito queries e mutation nos nossos pets utilizando outra ferramenta, que é o Apollo. Iremos usar o Apollo client para react e vamos entender melhor como funcionam queries, mutation, o que o Apollo acrescenta, como podemos organizar nosso projeto.

Junto com tudo isso vamos entrar bastante no playground e usar muito a documentação nativa do Graphql. Nos vemos durante o curso.

Iniciando o servidor GraphQL - Setup do Projeto

Olá. Vamos fazer agora nossa configuração inicial básica para rodar os servidores. Para isso, preciso que vocês já tenham baixado nossos dois repositórios iniciais, que é o de front, com o aplicativo, e o de rest, com a API. Peço também que vocês já tenham instalado tudo que pedimos para instalar na pasta anterior.

Primeiro, vou abrir o WorkBench, entrar com a senha e criar um novo scheme, chamado agenda petshop. Dou um apply e ele cria o scheme. Rodando os projetos, entro na pasta e vou digitar npm install, para instalar todas as dependências que vieram junto com o projeto. Pode ser que seja rápido ou pode demorar.

Terminada a instalação, dou um npm start para colocar nosso servidor no ar. Ele vai abrir uma aba para nós e carregar o aplicativo. Só que não tem nenhum cliente sendo listado, porque ele está buscando dados dentro da API e nós não subimos ela ainda.

Vou abrir uma nova aba, sem fechar a antiga, entrar na pasta agenda petshop, mas do rest. Aqui dentro dou o npm install. Ele vai colocar a API, instalar tudo que precisamos, e vamos subir ele no ar. Damos o start também, para ele fazer algumas outras configurações.

Executando a página, temos os dados aparecendo. Conseguimos visualizar, está funcionando. É o que precisávamos.

Iniciando o servidor GraphQL - Conhecendo o playground

Então, o primeiro passo que temos que fazer para começar a migração do nosso API Graphql ao invés da API rest é subir a API Graphql. Vou clonar do repositório, abrir mais uma linha de comando e dar um get clone, porque em algum ponto da aplicação usaremos a rest e a Graphql. Eventualmente ele vai ter só Graphql, mas até lá vamos usar os dois.

Vou entrar na nossa pasta e dar o npm install para ele instalar todas as dependências. Terminando, podemos rodar o npm start. Ele subiu o servidor. Por padrão, ele vai subir sempre na porta 4000. Vamos dar uma olhada.

Aqui é o playground do Graphql, e ele tem várias funções bem legais. A mais importante, sem dúvida, é a documentação. Nela, vamos ter todos os dados, as formas que podemos consumir, como vamos consumir. Iremos usar muito isso durante o curso, porque é através dele que vamos entender certinho como vamos pegar os dados, o que podemos pegar, o que temos que usar. É onde vamos rodar queries ou mutations.

Sobre o curso GraphQL parte 3: integrando com sua aplicação

O curso GraphQL parte 3: integrando com sua aplicação possui 108 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de Node.JS em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Node.JS acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas