Fullstack React e GraphQL: Couchbase

Primeiro de três artigos focados na criação de Fullstack com React e GraphQL com Express e Couchbase Server.

• Configuração de um servidor NoSQL Couchbase (Parte 1)
• Criação de uma API Express-GraphQL (Parte 2)
• Criar um cliente Apollo GraphQL em React (Parte 3)
• Código-fonte final

Aplicativo Fullstack React e GraphQL

Vamos criar um Fullstack Reagir aplicativo usando GraphQL. Este é um tutorial acessível, mas esperamos que você tenha alguma familiaridade com JavaScript, React, conceitos de GraphQL e NoSQL. Também usamos o Docker para provisionar nosso servidor Couchbase de nó único. Vamos nos conectar ao Couchbase por meio do Express-GraphQL, criado com o Node JS e Expressar JS usando express-graphql. Em seguida, consultaremos a API no React usando o Apollo GraphQL cliente.

Uma visão geral de alto nível do GraphQL

Antes de começarmos a criar esse aplicativo, quero falar sobre nossa escolha de usar um API GraphQL em vez de um API RESTe, em seguida, vamos para a configuração do banco de dados.

GraphQL é uma linguagem de consulta fortemente tipada para APIs. É uma forma declarativa de buscar dados, que está sendo rapidamente adotada pela comunidade JavaScript e também por outras comunidades. Permite controle granular sobre a obtenção de dados e economiza tempo ao fazer chamadas adicionais à API. Todas as consultas e mutações ocorrem em um único ponto de extremidade, em vez de vários pontos de extremidade como o REST. Isso significa menos código para escrever gerenciando URLs no React. Além disso, há uma pegada menor na conexão. Para obter mais informações sobre GraphQL vs REST, sugiro uma palestra de Nate Barbettini intitulada: Confronto de APIs: RPC vs REST vs GraphQL.

Se você estiver familiarizado com JSON, verá que Sintaxe de consulta do GraphQL simples de usar e seus dados fáceis de explorar GraphiQLum IDE no navegador que usamos para testar nossas consultas e descobrir o que é possível com qualquer API GraphQL.

Esse IDE do GraphiQL será útil mais tarde, quando precisarmos testar nossos próprios pontos de extremidade do GraphQL. O GraphiQL está disponível para todos os servidores GraphQL. Por exemplo, o GitHub tem uma das APIs públicas mais antigas do GraphQL (sendo um dos primeiros a adotar). Ela permite que você explore esse gráfico de dados usando a API Explorador da API v4 do GraphQL do GitHub.

Observação: O GitHub tinha uma das APIs RESTful públicas mais populares conhecidas pela comunidade de desenvolvedores e, em 2016, eles mudaram para um aplicativo GraphQL em vez de REST para sua versão 4 da API do GitHub. Isso reduz muito o esforço que um desenvolvedor tem de fazer para usar a API do GitHub e torna a experiência do desenvolvedor melhor. Uma solicitação é simplesmente um texto enviado por meio de um HTTP POST em uma sintaxe que parece um híbrido entre JSON e funções JS. A resposta é uma resposta leve (apenas o que eu pedi) da API GraphQL. Esses são apenas alguns dos benefícios que os desenvolvedores obtêm com a mudança de REST para GraphQL pelo GitHub.

O banco de dados do Couchbase

Para dar início ao nosso projeto, precisamos de dados. Abordaremos este projeto como se tivéssemos um cliente que já tem um banco de dados, especificamente, ele está usando Servidor Couchbase como um armazenamento de documentos.

O SDK do NodeJS do servidor Couchbase fornece as ferramentas necessárias para se conectar via Node JS e Express ao nosso servidor Couchbase e seus dados.

Para sua informação, há muitos outros SDKs disponíveis além do Node JS para o Couchbase Server, incluindo C, .NET, Ir, Java, PHP, Pythone Scala.

Coloque suas habilidades de SQL para trabalhar no NoSQL

O Couchbase Server aproveita suas habilidades em SQL por meio do N1QL (SQL para JSON) Linguagem de consulta de banco de dados que permite que você consulte o Couchbase, um repositório de dados de documentos NoSQL com uma sintaxe quase idêntica à do SQL.

Instalar e executar o Couchbase com o Docker

Se você optar por fazer download e instalar o Couchbase localmente e não quiser usar o Docker, basta pule para as instruções de instalação manual. Para obter ajuda com o próprio Docker, visite docs.docker.com.

Obter o couchbase imagem:

Vamos clonar um repositório existente para obter o arquivo de encaixe e configuration.sh que precisamos:

Criar uma nova imagem a partir de Dockerfile que usa o couchbase Docker como sua base:

Execute essa nova imagem:

Se você tiver problemas para executar o último comando, pode ser que não tenha uma rede chamada "bridge". Nesse caso, execute docker network ls e encontre o nome de seu nome de rede e driver padrão e use-o em seu lugar.

Nesse ponto, podemos visitar localhost:8091 e faça login com o Administrador & senha.

Instalando o Couchbase localmente

Se você instalou com o Docker, poderá pule para a próxima seção.

O processo de instalação é simples e nós o ajudamos a Linux, Mace Windows.

Depois de instalado, você pode acessar o Console da Web do Couchbase Server usando localhost:8091.

Nessa tela, você pode clicar em "Configurar novo cluster“.

O nome do cluster fica a seu critério e representa todos os seus buckets do Couchbase. O usuário e a senha de administrador é uma conta de administrador do servidor para fazer login no painel de todo o servidor, não é um usuário e uma senha para se conectar a um bucket específico de dentro do nosso aplicativo Express. Falaremos sobre isso mais tarde.

Configurei meu cluster com os serviços padrão e as cotas de memória.

Explore nossa caçamba no console

Vamos acessar o Couchbase Server Dashboard e clicar em "Servers" (Servidores) para ver nosso servidor criado inicialmente.

Em seguida, clique em "Buckets". Um Couchbase Balde é uma coleção de documentos. Você pode "Add Bucket" para criar sua própria coleção de documentos ou adicionar dados de amostra. Se você seguiu as instruções do arquivo Docker, o amostra de viagem O balde já deve estar carregado e visível nessa tela.

O uso desse banco de dados de amostra nos permitirá começar a trabalhar com nosso aplicativo Fullstack React e GraphQL, e começaremos com o Express para criar nossa API, o que facilitará as coisas para nós, pois já temos dados e índices configurados.

Os índices são configurados automaticamente nesse amostra de viagem como parte do script usado para instalar o bucket. Esses índices são necessários para usar a linguagem de consulta N1QL (SQL para JSON).

Se você quiser saber mais e criar seu próprio bucket e índices, Dê uma olhada neste artigo!

Seu Bucket deve ser semelhante ao bucket da imagem abaixo:

Se clicarmos no botão "Documents" (Documentos), poderemos ver alguns dos dados em nosso Bucket:

Ao clicar em "Edit Document as JSON", você verá o JSON do valor dessa chave específica e poderá até mesmo editar os dados a partir daqui. Experimente!

Antes de prosseguir, queremos clicar na guia "Security" (Segurança) e configurar um usuário para se conectar a esse bucket.

Na página "Security" (Segurança), clique em "Create User" (Criar usuário). Adicione um nome de usuário e uma senha específicos para se conectar ao bucket a partir do nosso aplicativo Express. Usei meu próprio nome e ele corresponderá às informações no código-fonte do projeto. Portanto, lembre-se de usar seu nome e atualizar o código conforme necessário.

Certifique-se de marcar a caixa de seleção "Application Access" (Acesso ao aplicativo) para o nosso amostra de viagem balde. Isso é tudo de que precisamos. Lembre-se de seu nome de usuário e senha, pois precisaremos deles para nos conectarmos.

Índices de balde

Para esta demonstração, nossos índices foram gerados automaticamente. Se você quiser adicionar índices, poderá adicioná-los usando a guia "Query" (Consulta) e executar o SQL necessário para criá-los. Se você estiver familiarizado com SQL, a criação de índices para o Couchbase será intuitiva!

Se quiser saber mais sobre índices no Couchbase, dê uma olhada em um artigo recente mostrando como usar o Serviço de consultoria de índice para o Couchbase. Essa é uma nova ferramenta fornecida junto com a versão mais recente do Couchbase Server 6.5. Outro ponto de interesse também pode ser o nosso Índices secundários globais documentação.

Aqui estão os índices para o amostra de viagem que instalamos com o Couchbase Server.

Uma breve menção sobre as consultas N1QL

Outro aspecto a ser mencionado sobre o Couchbase Server é a linguagem que usamos para consultar nossos documentos. O Couchbase Server usa N1QL. N1QL é uma sintaxe semelhante à do SQL que qualquer pessoa com experiência relacional deve ser capaz de entender. Ela é especialmente útil para consultar coleções de documentos. Abordaremos alguns conceitos básicos em nosso próximo artigo, quando criarmos nossa API GraphQL.

Você pode encontrar mais informações em N1QL na documentação, bem como informações sobre o uso do couchbase.get para consultar todas as informações que podem ser encontradas em nosso SDK do NodeJS do servidor Couchbase documentos.

Com a configuração do Couchbase, agora podemos continuar e entrar na parte do JavaScript para criar nosso aplicativo Fullstack React e GraphQL. Passaremos à criação do nosso aplicativo Servidor Express-GraphQL em seguida, e depois criar um cliente React no último segmento.

Criação de uma API Express-GraphQL (Parte 2)