Cria\u00e7\u00e3o do aplicativo React com um cliente Apollo GraphQL<\/h2>\n
Neste segmento do tutorial, eu o ajudarei a conectar as partes relacionadas ao uso do Apollo GraphQL. Inclu\u00ed a maior parte do aplicativo React de que voc\u00ea precisar\u00e1 em um reposit\u00f3rio do GitHub. Esse c\u00f3digo predefinido que clonamos em nosso projeto ser\u00e1 um projeto React que foi criado com o Create Rect App e tem roteamento, navega\u00e7\u00e3o, menus, comportamento responsivo, estado e contexto sendo gerenciados, bem como alguns utilit\u00e1rios e outros componentes para dar suporte a uma arquitetura b\u00e1sica de aplicativo. Eu queria ter certeza de que s\u00f3 precisar\u00edamos nos preocupar com a configura\u00e7\u00e3o do cliente Apollo GraphQL, mas queria fazer isso no contexto de um aplicativo em funcionamento.<\/p>\n
Clonar um aplicativo React existente<\/h3>\n
Nosso front-end React desacoplado ser\u00e1 um irm\u00e3o do Vamos clonar o ponto de partida do nosso projeto React executando o seguinte comando git a partir da raiz ( In the command above, we removed the `.git` directory as we do not want to take on the existing git history from the project we cloned into our project. You will need to initialize git on your own and periodically commit if you want to. It’s encouraged so that you don’t lose your work.<\/p>\n Agora temos um aplicativo React em funcionamento adicionado ao nosso projeto com roteamento b\u00e1sico. H\u00e1 alguns componentes e utilit\u00e1rios que existem no projeto React, mas ainda n\u00e3o est\u00e3o conectados. Antes de chegarmos a eles, vamos executar o aplicativo React por conta pr\u00f3pria para garantir que tudo esteja funcionando sem erros:<\/p>\n Abra o console (\u2318 Cmd + \u2325 Option + I<\/strong> no Mac) (Ctrl + \u2191 Shift + J<\/strong> no PC)<\/p>\n Certifique-se de que clicar para frente e para tr\u00e1s de Home para Airlines n\u00e3o gere nenhum erro e que n\u00e3o haja erros ou avisos importantes. O que vemos nesta visualiza\u00e7\u00e3o \u00e9 a rota Airlines, que \u00e9 a rota \u00e0 qual adicionaremos nosso recurso de detalhes mestre. \u00c9 como se outra pessoa j\u00e1 tivesse se encarregado de todo o estilo e do layout b\u00e1sico, nosso trabalho ser\u00e1 conectar o Antes de fazermos altera\u00e7\u00f5es no aplicativo React, vamos entender alguns dos arquivos que temos em nosso projeto e que ainda n\u00e3o est\u00e3o em jogo com nossa rota Airline.<\/p>\n H\u00e1 seis arquivos com os quais queremos nos familiarizar e que est\u00e3o aguardando para serem usados.<\/p>\n Uma conven\u00e7\u00e3o que estamos usando em rela\u00e7\u00e3o \u00e0 estrutura de diret\u00f3rios \u00e9 que os componentes no diret\u00f3rio \" comApolloProvider<\/strong> - Estou usando um componente de ordem superior para facilitar a leitura. Entenda que isso \u00e9 semelhante a importar o ApolloProvider em um componente pai. Essa pode n\u00e3o ser a melhor pr\u00e1tica, mas gosto do fato de manter meu c\u00f3digo organizado.<\/p>\n Temos Por fim, temos o Em nosso projeto, temos uma rela\u00e7\u00e3o de componente mestre-detalhe ( Ele exibir\u00e1 apenas uma lista de companhias a\u00e9reas no lado esquerdo. Al\u00e9m disso, ser\u00e1 exibido um link no lado direito da p\u00e1gina com os seguintes dizeres: \"Selecione uma companhia a\u00e9rea\"<\/strong>.<\/p>\n A sele\u00e7\u00e3o de uma companhia a\u00e9rea no menu carregar\u00e1 os detalhes no lado direito da p\u00e1gina. Depois de clicado, atualizaremos o URL com o ID adequado usando um componente fornecido pelo React Router:<\/p>\n Aqui, faremos a correspond\u00eancia com o ID Precisamos de tr\u00eas pacotes: Se voc\u00ea quiser se familiarizar com o Apollo e o GraphQL, o Documenta\u00e7\u00e3o do GraphQL para consultas<\/a>O site da empresa, que \u00e9 um lugar ideal para come\u00e7ar, tamb\u00e9m pode ser visto: Documenta\u00e7\u00e3o do GraphQL sobre como fazer consultas<\/a> no Apollo e no React.<\/p>\n The `airlines.jsx` file is where we will be doing most of our work. Let’s start by adding some imports:<\/p>\n Underneath the `import { airlineGql }` line, we need to import Isso envolve nosso componente com um provedor Apollo. Usei esse m\u00e9todo em vez de envolver todo o nosso aplicativo com um ApolloProvider. Uma tentativa de tornar o c\u00f3digo que estou compartilhando um pouco menos complexo. Atualizaremos o A linha que diz:<\/p>\n deve ser alterado para:<\/p>\n Our first argument to the HOC is a React Component `Airlines` (this component). Therefore, when our app is rendered, the Nossas importa\u00e7\u00f5es finais s\u00e3o os dois componentes que j\u00e1 criei para voc\u00ea (lista de companhias a\u00e9reas.jsx<\/a> e detalhes da companhia a\u00e9rea.jsx<\/a>):<\/p>\n Quando esses dois arquivos forem importados, poderemos adicionar a sintaxe de seus componentes \u00e0 nossa grade flexbox (simple-flexbox<\/a> que criamos para nos ajudar a dividir facilmente nossa p\u00e1gina por uma porcentagem:<\/p>\n Com tudo isso pronto, s\u00f3 precisamos lidar com nossos dados. Let’s bring React Router’s `match` in by destructuring the props to the `Airlines` Component::<\/p>\n Em seguida, adicionaremos o seguinte ao n\u00edvel superior do nosso O que acabamos de fazer:<\/strong><\/p>\n O Essa rota, de fato, diz: Procure uma rota com o nome Se executarmos nosso projeto agora e o servidor GraphQL n\u00e3o estiver em execu\u00e7\u00e3o, receberemos um erro. Portanto, precisamos iniciar esse servidor antes de executar nosso aplicativo React para testar nossa p\u00e1gina master-detail.<\/p>\n Para executar nosso projeto fullstack React e GraphQL, precisaremos primeiro adicionar mais um pacote:<\/p>\n Nosso aplicativo est\u00e1 hospedado em um dom\u00ednio (localhost:3000). Ele faz solicita\u00e7\u00f5es a uma API em outro dom\u00ednio (localhost:4000). Sem o CORS, a pol\u00edtica de mesma origem do navegador bloquear\u00e1 a solicita\u00e7\u00e3o.<\/p>\n O CORS permite que nossa API informe ao navegador que n\u00e3o h\u00e1 problema em nosso aplicativo Web fazer solicita\u00e7\u00f5es a ela. Ele faz isso enviando cabe\u00e7alhos HTTP. Precisamos usar o CORS em nosso servidor Express-GraphQL. Basta adicionar o c\u00f3digo a seguir para substituir as sete primeiras linhas existentes.<\/p>\n Para se familiarizar com o CORS da frente para tr\u00e1s, confira um artigo intitulado: \"Como ativar o CORS para o Express-GraphQL e o Apollo Server<\/a>”<\/p>\n Neste ponto, s\u00f3 precisamos garantir que nossa inst\u00e2ncia do Couchbase Server esteja funcionando.<\/p>\n No diret\u00f3rio do servidor, execute o comando node para iniciar o servidor Express-GraphQL:<\/p>\n Em seguida, no diret\u00f3rio do cliente, vamos executar o comando para iniciar nosso cliente React:<\/p>\n O aplicativo React se conecta \u00e0 API Express-GraphQL, que, por sua vez, consulta o banco de dados Couchbase para recuperar os dados da companhia a\u00e9rea, e agora devemos ter um aplicativo funcional se o visitarmos: localhost:3000<\/a><\/p>\n Agora que tudo est\u00e1 funcionando, vamos atualizar o projeto para executar ambos os projetos com um \u00fanico comando npm.<\/p>\n We need to initialize an npm project in our root directory. The server and client both have their own project directories. We give the root directory its own `package.json` file with only one dependency.<\/p>\n Altere os diret\u00f3rios para a raiz e execute:<\/p>\n Isso inicializar\u00e1 o npm e aceitar\u00e1 todos os padr\u00f5es (caso contr\u00e1rio, remova o Vamos configurar dois scripts chamados Tamb\u00e9m usaremos Substitua o Inicializamos o npm na raiz do nosso projeto, configuramos dois scripts para Um toque final \u00e9 mover o nome de usu\u00e1rio e a senha de nossas credenciais de conex\u00e3o com o Couchbase para um Altere os diret\u00f3rios para Em seguida, importe Atualize o c\u00f3digo em que usamos o nome de usu\u00e1rio e a senha:<\/p>\n Crie um arquivo em nosso We also need to update the server directories `.gitignore` file. There is a block of ignores labeled `#misc`, let’s modify that block of ignores and add `.env` to it. Remember this file does not get uploaded to git as part of our course control.<\/p>\n Let’s run our project from the root using `npm start` to ensure that everything still works!<\/p>\n Criamos um projeto fullstack de React e GraphQL. Utilizando SDK do n\u00f3 do Couchbase<\/a> e do cliente e servidor Apollo GraphQL, aproveitamos nosso conhecimento de JavaScript para criar um aplicativo de pilha completa. Espero que este tutorial o ajude em sua busca para dominar o JavaScript de pilha completa.<\/p>\n Estou dispon\u00edvel no Twitter @httpJunkie<\/a>Se voc\u00ea quiser, sinta-se \u00e0 vontade para entrar em contato, meu DM est\u00e1 sempre aberto! Confira os links fornecidos abaixo para obter mais informa\u00e7\u00f5es sobre a cria\u00e7\u00e3o com Apollo e React.<\/p>\n O c\u00f3digo final desse projeto pode ser encontrado no GitHub em: The third of three articles focused on building Fullstack React and GraphQL with the Apollo GraphQL Client. Setting up a NoSQL Couchbase Server (Part 1) Building an Express-GraphQL API (Part 2) Create Apollo GraphQL Client in React (Part 3) Final […]<\/p>","protected":false},"author":53002,"featured_media":10876,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1816,1822,1812,2201],"tags":[2210,2454],"ppma_author":[8922],"class_list":["post-8222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-couchbase-server","category-node-js","category-n1ql-query","category-tools-sdks","tag-graphql","tag-react"],"acf":[],"yoast_head":"\nservidor couchbase-gql<\/code> Aqui est\u00e1 uma ideia b\u00e1sica de como ser\u00e1 a nossa estrutura de diret\u00f3rios:<\/p>\n \r\n raiva com base de toque\r\n \u2502\r\n \u2514\u2500\u2500\u2500couchbase-gql-server\r\n \u2502\r\n \u2514\u2500\u2500\u2500react-apollo-client\r\n<\/pre>\n
raiva com base de toque<\/code> ) em nosso terminal:<\/p>\ngit clone https:\/\/github.com\/httpJunkie\/react-apollo-client.git && cd react-apollo-client && rm -rf .git<\/pre>\n
npm install && npm start<\/pre>\n
![\"preview](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/02\/react-starting-point-layout.jpg\")
<\/a><\/p>\nlista de companhias a\u00e9reas.jsx<\/code> e detalhes da companhia a\u00e9rea.jsx<\/code> no lugar do texto atual do espa\u00e7o reservado em cada lado da p\u00e1gina. Felizmente, nossa equipe de design garantiu que todo o trabalho de layout e CSS estivesse completo!<\/p>\nVis\u00e3o geral de nossos ativos<\/h3>\n
\n
rotas<\/code>\" s\u00e3o componentes do React que s\u00e3o resolvidos para formar uma rota espec\u00edfica e esses arquivos dentro do diret\u00f3rio \"parcial<\/code>\" s\u00e3o componentes que n\u00e3o s\u00e3o uma visualiza\u00e7\u00e3o carregada por uma rota, mas sim uma visualiza\u00e7\u00e3o parcial ou um componente que pode ser potencialmente reutilizado em nosso aplicativo. Essa \u00e9 uma conven\u00e7\u00e3o que eu uso, e n\u00e3o algo que o React nos obriga a fazer.<\/p>\nimportar React de 'react'\r\nimportar { ApolloProvider, InMemoryCache, ApolloClient } de '@apollo\/client';\r\n\r\nconst withApolloProvider = (WrappedComponent, graphqlEndpoint) => {\r\n const apolloClient = new ApolloClient({\r\n uri: graphqlEndpoint,\r\n cache: new InMemoryCache()\r\n })\r\n\r\n return (props) => (\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default withApolloProvider<\/pre>\nlista de companhias a\u00e9reas.jsx<\/code><\/a> e um detalhes da companhia a\u00e9rea.jsx<\/code><\/a>esses dois componentes ser\u00e3o carregados lado a lado em nosso companhias a\u00e9reas.jsx<\/code> componente. A lista simplesmente exibir\u00e1 cada companhia a\u00e9rea e usar\u00e1 pagina\u00e7\u00e3o.jsx<\/code><\/a> para garantir que n\u00e3o tenhamos uma longa lista no lado esquerdo da p\u00e1gina.<\/p>\ncompanhia a\u00e9rea-gql.js<\/code> que \u00e9 simplesmente nosso arquivo Consulta GraphQL<\/a> para todas as companhias a\u00e9reas do Reino Unido. Eu gosto de separar minhas consultas em outro arquivo para fins de organiza\u00e7\u00e3o, n\u00e3o \u00e9 necess\u00e1rio, mas limpa o companhias a\u00e9reas.jsx<\/code> arquivo.<\/p>\nComo funciona nossa p\u00e1gina mestre-detalhe<\/h3>\n
lista de companhias a\u00e9reas.jsx<\/code> && detalhes da companhia a\u00e9rea.jsx<\/code>), no \/companhias a\u00e9reas<\/code> rota. Essa rota \u00e9 resolvida para um componente de visualiza\u00e7\u00e3o chamado: companhias a\u00e9reas.jsx<\/code>que utiliza os recursos do React Router para corresponder n\u00e3o apenas \u00e0 rota, mas tamb\u00e9m a um par\u00e2metro URI adicional (companhia a\u00e9reaId<\/code>) que podemos anexar ao final da rota para sermos espec\u00edficos. Quando nenhuma rota espec\u00edfica companhia a\u00e9reaId<\/code> O par\u00e2metro URI est\u00e1 presente no URL:<\/p>\nhttps:\/\/localhost:3000\/airlines<\/code><\/p>\nhttps:\/\/localhost:3000\/airlines\/1355<\/code><\/p>\n1355<\/code> com a companhia a\u00e9rea correta j\u00e1 na mem\u00f3ria em nossos dados do aplicativo React e exibir as informa\u00e7\u00f5es apropriadas da companhia a\u00e9rea \"British Airways\".<\/p>\nAdi\u00e7\u00e3o de depend\u00eancias para nosso cliente Apollo GraphQL<\/h3>\n
@apollo\/react-hooks<\/code><\/a>, apollo-boost<\/code><\/a>e graphql<\/code><\/a>, trazidos para o projeto, ent\u00e3o vamos cd<\/code> no cliente react-apollo<\/code> e execute o comando npm install <\/code> para os pacotes necess\u00e1rios para o GraphQL e o Apollo:<\/p>\nnpm install @apollo\/client graphql<\/pre>\n
Cria\u00e7\u00e3o da p\u00e1gina mestre-detalhe<\/h3>\n
import { useQuery } from '@apollo\/client'\r\nimport { airlineGql } from '.\/airline-gql'<\/pre>\ncomApolloProvider<\/code>um componente de ordem superior.<\/p>\nimportar withApolloProvider de '..\/hoc\/withApolloProvider'<\/pre>\n
companhias a\u00e9reas.jsx<\/code> exporta\u00e7\u00e3o do arquivo.<\/p>\nexportar linhas a\u00e9reas padr\u00e3o<\/code><\/strong><\/p>\nconst WrappedComponent = withApolloProvider(Airlines, 'https:\/\/localhost:4000\/graphql')\r\nexport default WrappedComponent<\/pre>\n
<Airlines \/><\/code> ser\u00e1 envolvido por nosso componente ApolloProvider<\/a>. Um provedor no React \u00e9 uma fun\u00e7\u00e3o da API Context. O Context fornece dados em toda a \u00e1rvore de componentes em nosso aplicativo React sem precisar passar os dados manualmente por meio de props. No nosso caso, o <Airlines \/><\/code> ser\u00e1 envolvido pelo nosso provedor, dando a ele acesso aos dados fornecidos pelo c\u00f3digo do cliente Apollo definido nesse componente comApolloProvider<\/code> componente de ordem superior.<\/p>\nimportar AirlineList de '..\/partial\/airline-list'\r\nimport AirlineDetails from '..\/partial\/airline-details'<\/pre>\n
<\/pre>\n
useQuery<\/code> retorna um objeto do cliente Apollo GraphQL com carregamento<\/code>, erro<\/code>e dados<\/code> que podemos usar. Tamb\u00e9m precisamos combinar o caminho da nossa rota (a partir do URL). O acesso a isso \u00e9 f\u00e1cil com o React Router: (match.params<\/code>).<\/p>\nconst Airlines = ({ match }) => {<\/pre>\nCompanhias a\u00e9reas<\/code> Componente:<\/p>\nconst airlineId = Number(match.params.id)\r\n const { loading, error, data } = useQuery(airlineGql)\r\n\r\n se (loading) return <p>Carregando...<\/p>\r\n Se (erro) retornar <p>Erro :( <span style="{{color:" 'red'}}>{error.message}<\/span> )<\/p>\r\n\r\n const airlines = data.airlinesUK\r\n const airline = match.params.id ? airlines.find(a => a.id === airlineId) : null<\/pre>\n\n
companhia a\u00e9reaId<\/code> se o match.params.id<\/code> retorna um n\u00famero e n\u00e3o indefinido<\/code> (temos uma ID em nosso caminho de rota? \/companhias a\u00e9reas\/1355<\/code> ou n\u00e3o \/companhias a\u00e9reas\/<\/code>?).<\/li>\ncompanhia a\u00e9reaGql<\/code> file. Lembre-se de que ele retorna coisas, portanto, estamos desestruturando-as aqui tamb\u00e9m.<\/li>\ncompanhias a\u00e9reas<\/code><\/li>\nmatch.params.id<\/code> cont\u00e9m um n\u00famero, significa que nossa rota cont\u00e9m uma ID. Nesse caso, capturamos os dados dessa companhia a\u00e9rea espec\u00edfica em uma vari\u00e1vel local chamada companhia a\u00e9rea<\/code> caso contr\u00e1rio, armazenamos um valor nulo nessa vari\u00e1vel.<\/li>\n<\/ol>\npartida<\/code> funcionar\u00e1 devido \u00e0 maneira como configuramos nossa rota no App.js<\/code> p\u00e1gina:<\/p>\n}\r\n\/><\/pre>\n
\/companhias a\u00e9reas\/<\/code> e qualquer coisa depois disso estar\u00e1 dispon\u00edvel usando o match.params.id<\/code> sintaxe.<\/p>\n
\n\"Error :( Network error: Failed to fetch )\"<\/p>\nExecutando nosso aplicativo Full Stack<\/h3>\n
npm install cors<\/pre>\n
const express = require('express')\r\nconst cors = require('cors')\r\nconst graphqlHTTP = require('express-graphql')\r\nconst { buildSchema } = require('graphql')\r\n \r\nconst couchbase = require('couchbase')\r\n \r\nconst app = express()\r\napp.use(cors())<\/pre>\nservidor de n\u00f3s<\/pre>\n
npm start<\/pre>\n
![\"Final](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/02\/final-project.gif\")
<\/a><\/p>\nUsando Postinstall e Concurrently<\/h2>\n
npm init -y && npm install concurrently --save-dev<\/pre>\n
-y<\/code> ) e instalar o pacote de que precisamos para executar simultaneamente os dois projetos com um \u00fanico comando.<\/p>\ncliente<\/code> e servidor<\/code> para executar cada projeto individualmente e, em seguida, um iniciar<\/code> para executar o cliente e o servidor ao mesmo tempo.<\/p>\np\u00f3s-instala\u00e7\u00e3o<\/code> para executar o npm install<\/code> de forma independente quando o script npm install<\/code> est\u00e1 completo. p\u00f3s-instala\u00e7\u00e3o<\/code> faz parte de Scripts npm<\/a> by default. All of these changes that we make below will enable someone to clone your repo, run `npm install && npm start` to which will kick off all three installs, and then concurrently run each project.<\/p>\npackage.json<\/code> que acabou de ser adicionado com os scripts a seguir:<\/p>\n\"scripts\": {\r\n \"cliente\": \"cd react-apollo-client && npm start\",\r\n \"server\" (servidor): \"cd couchbase-gql-server && node server\",\r\n \"start\": \"concurrently --kill-others \\\"npm run server\\\" \\\"npm run client\\\"\",\r\n \"postinstall\": \"(cd couchbase-gql-server && npm install); (cd react-apollo-client && npm install);\"\r\n },<\/pre>\ncliente<\/code> e servidor<\/code> que podemos executar simultaneamente com npm start<\/code>. Al\u00e9m disso, quando algu\u00e9m clona nosso reposit\u00f3rio, agora pode executar: npm install && npm start<\/code> e ele instalar\u00e1 todos os pacotes dos tr\u00eas projetos e depois os ativar\u00e1, desde que eles tenham o Couchbase Server em execu\u00e7\u00e3o, tudo funcionar\u00e1.<\/p>\nRemover usu\u00e1rio e senha do arquivo do servidor<\/h2>\n
.env<\/code> arquivo. Isso garantir\u00e1 que n\u00e3o enviemos credenciais confidenciais ao GitHub para que o mundo as veja.<\/p>\ncouchbase-gql-server\/<\/code> e instalar dotenv<\/code>:<\/p>\nnpm install dotenv --save-dev<\/pre>\n
dotenv<\/code> e usar a desestrutura\u00e7\u00e3o de objetos para obter acesso \u00e0s vari\u00e1veis que configuramos em nosso .env<\/code> file:<\/p>\nrequire('dotenv').config()\r\nconst { cbUser, cbPass } = process.env<\/pre>\nconst cluster = new couchbase.Cluster('couchbase:\/\/localhost', {\r\n nome de usu\u00e1rio: cbUser, senha: cbPass\r\n})<\/pre>\nservidor couchbase-gql<\/code> diret\u00f3rio denominado .env<\/code>\u00a0 com nossas credenciais do Couchbase Server:<\/p>\ncbUser=Administrador\r\ncbPass=senha<\/pre>\n
# misc\r\n.DS_Store\r\n.env\r\n.env.local\r\n.env.development.local\r\n.env.test.local\r\n.env.production.local<\/pre>\n
Recapitula\u00e7\u00e3o do projeto<\/h2>\n
\ngithub.com\/httpJunkie\/rage-with-couchbase-final<\/a><\/p>\nRecursos do Apollo e do React<\/h2>\n
\n