Transcrições
1. Visão geral do curso: Oi lá. Meu nome é Savvy e este é o guia completo para construir um gráfico Pirelli P I com JavaScript agora gráfico. Você está ganhando muita popularidade agora porque é muito superior ao descanso
tradicional. Olhos AP. Grandes empresas como Get Up Facebook e Yelp estão se mudando para a Graft Ul porque é muito melhor durante este curso. Vou assegurar-lhe como construir um euro gráfico MP I com JavaScript Discourse é estruturado em cinco partes. Vou começar explicando os princípios básicos de astúcias. Bem, depois disso vai fazer alguns preparativos e começar a implementar o nosso gráfico você l um p i. Finalmente, vamos dar uma olhada em gráfico uma grande ferramenta para testar o seu gráfico você l um p i. Para tornar isso tudo um pouco mais realista, vamos criar um gráfico você l um p i para um bloco. Eu tenho um pequeno banco de dados com postagens em bloco, autores e comentários que usaremos como base para que o nosso P. I. acompanhe. Você vai precisar de algum conhecimento básico de javascript e nenhum Js. Você não precisa ser um especialista em programação, embora o código e exemplos que eu usei ao longo deste curso sejam simples e
auto-explicativos , então o conhecimento básico é muito bom. Depois de terminar as pontuações, você será capaz de construir seu próprio gráfico UNDP I com JavaScript. Então o que você está esperando? E rolar agora e continuar com o próximo vídeo onde vou explicar em detalhes. Que gráfico você? Bem, na verdade é.
2. O que é o is: Oi, todo mundo. Meu nome é severo e neste vídeo será feito. Um olhar para o que astuto Bem, na verdade é gráfico. UAL é uma linguagem de consulta. Essa foi a válvula do Facebook em 2012, enquanto eles estavam trabalhando em seus aplicativos nativos IOS e Android. O que eles precisavam era de um
IP flexível, eficiente e que pudesse trabalhar com os dados relacionais que o Facebook tem. Eles acabaram criando enxerto você bem, porque nenhuma outra ferramenta poderia resolver seu problema. Graphic UAL tem muitas características que o tornam uma ótima escolha para construir um Ap I. Então vamos rever alguns deles. Em primeiro lugar, ul
gráfico é muito eficiente. Ele permite que o cliente pergunte quais informações ele precisa, e o servidor responderá. Só esses dados? Também é possível executar várias consultas em uma única solicitação, e você também pode navegar pelos relacionamentos fora das entidades. Por exemplo, você pode pedir gráfico que el para uma lista de seus amigos e o nome de seus amigos. A UL gráfica retornará exatamente isso, e não incluirá combustíveis que você não solicitou, como data de nascimento ou e-mail. Em segundo lugar, gráfico você bem, ele usa um sistema de tipo. Isso cria um contrato entre o cliente e o servidor, e permite que o servidor valide uma consulta de entrada e forneça
mensagens de erro significativas caso algo esteja errado com ele. Agora, como usuário de um A P I, o sistema de tipo lhe dá segurança adicional porque você sabe que tipo de dados o A P I retornará. Em terceiro lugar, UAL
gráfico expõe apenas um ponto final para todo o seu AP I e é construído de uma forma que permite envolver o seu A p i sem quebrar a compatibilidade com versões anteriores. Na verdade, Facebook diz que eles nunca têm versão lá. Gráfico seu A p I, e que todas as versões de seus aplicativos ainda funcionam com versões mais recentes fora de seu P I. Ele disse que gráfico você vai é o último AP I que você deve implantar muito impressionante, certo? E finalmente, enxerto. O UAL não está vinculado a nenhum banco de dados ou mecanismo de armazenamento específico. Você pode conectá-lo à sua base de código existente em sua base de dados existente. Você pode até mesmo usar vários bancos de dados juntos para alimentar um único p I, de modo que foi uma
visão geral rápida fora. Que gráfico você saiu? Este No próximo vídeo, vamos comparar gráfico você bem para descanso tradicional AP Ice.
3. GraphQL de APs de de Rse: Oi. Todos mineração misc grave e neste vídeo será tomada. Um olhar para as diferenças entre gráfico você bem e descansou ser gelo. Agora eu vim com um exemplo prático para comparar os dois. Vamos supor que não temos um P I para um bloco são blogueiros escritores simples, e ele contém três tipos de objetos. Bloquear postagens, autores e comentários. A relação entre estes é bastante óbvia. Block apresenta Air, escrito por um único autor e post de bloco pode ter um ou mais comentários. Agora vamos dar uma olhada em como você pode construir em um P I. Para isso, usando o princípio de descanso, você começaria criando um único e ponto por entidade. Quer obter os detalhes sobre uma publicação de bloco, e isso contém o título e o conteúdo fora do post. Outro para obter os detalhes sobre os comentários. E isso incluiria o nome do cartaz e, claro, o conteúdo do próprio comentário. Eu também vou adicionar um para obter os detalhes de um autor que irá retornar é o nome e um endereço de
e-mail, por exemplo, e você também deve ser capaz de listar todas as mensagens de bloqueio no site. E assim você adiciona 1/4 e ponto que retorna uma lista de mensagens de bloqueio. Eu DS. Agora esta arquitetura parece boa, mas vamos realmente usá-la. Quero renderizar uma lista de posts em bloco onde mostramos o título de cada post e o nome do autor. Então vamos começar fazendo um pedido para as últimas mensagens de bloco e o A P. Eu responderei com um arejado contendo as referências a alguns desses posts. Depois disso, eu preciso fazer um pedido por bloco post para obter o título e o conteúdo de cada um. Mas esta resposta contém mais uma referência desta vez um post referências e autor. Então, a fim de saber quem escreveu para postar, eu preciso fazer outro conjunto de pedidos para obter o nome de cada um dos autores, e isso é o que o A P eu iria retornar agora. Este exemplo é um pouco exagerado, mas demonstra a dor. Aponte os olhos de repouso AP. Em aplicativos da vida real, você definitivamente vai encontrar situações em que você tem que fazer várias solicitações para o servidor para obter todos os dados que você precisa. Isso pode ser dolorosamente lento porque cada faixa para o servidor adiciona um monte de esperar e ver, e isso não é ótimo para conexões móveis, por exemplo. Agora você pode querer se sentir tentado a adicionar alguns endpoints para resolver esse problema. Você pode adicionar uma postagem com autores e apontar para retornar uma lista de postagens junto com os detalhes sobre o autor. E então você pode adicionar outro para retornar contagens comuns também. Mas esta não é uma solução muito escalável. Isso causará uma explosão de endpoints que serão difíceis de manter e difíceis para novas pessoas aprenderem a usar. Então vamos agora dar uma olhada em como gráfico você vai resolver esses problemas com enxerto. Você bem, você pode fazer um único pedido e pedir todo o recurso é que você quer. Então aqui eu posso dizer que eu quero o último post com o nome fora dos autores. O servidor gráfico irá então procurar a postagem do bloco para você. Ele seguirá as relações com o autor, e será factual as informações sobre o autor, e ele vai transformar tudo para você em um único pedido. Agora eu gostaria de salientar aqui que a consulta QL autógrafo resposta tem exatamente a mesma forma fora de sua consulta que isso é muito útil porque você vai saber antecipadamente como o A p I vai responder e com o resto AP I isso não é o caso. Então aqui podemos ver à esquerda que consultamos por posts e à direita. Recebemos um objeto de gráfico você vai, que contém um post Harry contendo objetos com todos os atributos que queremos. Então, esse é o conteúdo do título e, em seguida, no objeto autor com a propriedade name. Então, para resumir, com UL gráfico, você pode obter vários recursos em uma única solicitação. A estrutura da sua consulta define a estrutura do gráfico de resposta. Você também entenderá a relação entre seus objetos e pode procurá-los se
for necessário. E, finalmente, você sempre obtém os dados que você nunca precisa demais. Nunca vai querer. Então foi isso para esta lição Nos próximos vídeos, vou explicar os principais conceitos de enxerto. Todos vocês muito obrigado por assistir, e eu vou ver vocês no próximo vídeo
4. Campos e argumentos e: Oi, todo mundo. Meu nome é ISC Savvier. E você está assistindo meu curso no gráfico You? Bem, neste vídeo vamos dar uma olhada em quais campos são e também vamos dar uma olhada em como você pode usar argumentos com campos. Então vamos começar com campos gráfico Você bem é tudo sobre pedir dados e você pode ser muito específico sobre quais partes dos dados que você deseja receber. Então deixe-me mostrar-lhe como é uma consulta básica no gráfico que você fora. Então eu vou começar dizendo que queremos consultar algo e que eu vou dizer que eu quero uma consulta postagens e eu quero receber o título de cada bloco posts. Então esta é uma consulta muito simples. E se eu rodar isso, teremos uma resposta de você. Bem, ele só diz que posts nos dá uma área de objetos, e cada objeto contém apenas o título de nossa postagem porque essa é a única coisa que
pedimos . Então, neste caso, consulta aqui é o nome da operação. Embora postagens e título nossos campos de ambos os campos são muito importantes em UAL gráfico e eles são unidade de dados que você pode pedir. E não importa o quão profundo na consulta esses campos aparecem. Há sempre chamados campos em. Eles sempre se comportam da mesma maneira, mesmo se você bagunçá-los agora, você também pode fazer uma sub-seleção de campos. Digamos que eu também quero saber quem escreveu esses posts de bloco enquanto eu tenho que fazer é que eu tenho que dizer, enquanto eu quero que os posts com o título. Mas eu também quero saber sobre o autor e autor é realmente um objeto. Então aqui eu posso definir quais campos de autor que eu quero. Então, se eu apertar espaço gráfico me diz que o autor tem uma idéia, nome e e-mail em uma propriedade post, e eu posso escolher qualquer um destes. Então eu vou dizer, enquanto eu quero o nome muitas vezes autor E então se eu executar essa consulta, eu obtenho um campo de autor dentro de minhas postagens, e isso é, é claro, um objeto novamente, que contém o nome fora do autor. Agora, claro, você pode aninhar esses campos ainda mais se sua estrutura de dados permitir agora. Ativo no vídeo anterior, a capacidade de consultar vários recursos é e o relacionamento em uma única solicitação pode ser gráfico. Você vai muito mais eficiente do que descansar AP I Então, neste caso, off current para os últimos posts. Eu peguei seu título e passei por seu relacionamento com a entidade do autor, e eu também peguei o nome do autor que está atribuído ao Post. Uma prisão, um P.I. Isto teria levado várias solicitações para o servidor. Agora vamos passar aos argumentos. Obtenção de objetos e campos são muito fáceis no gráfico. Você bem como acabamos de ver. Mas às vezes você precisa dar alguns argumentos. Por exemplo, você pode querer buscar um post de bloco particularmente baseado em seu i. D. para que ele limpe nosso crary existente. E eu vou dizer que eu quero um post e eu vou dá-lo em argumentos. E eu vou dizer que a idéia do Post que eu quero buscar é três,
por exemplo, por exemplo, e eu vou abrir os colchetes e dizer, Dê-me o título fora do post com i d três. Se eu rodar isso,
eu obtenho exatamente o título fora do bloco posts com I d. Três Agora, em um sistema de descanso tradicional, você pode Onley passar um único conjunto de argumentos para o servidor. , na UL gráfica No entanto, na UL gráfica, todos os campos e objeto aninhado podem ter seu próprio conjunto de argumentos. Então vamos dizer que você quer buscar os comentários fora deste bloco posts. Então eu simplesmente adiciono comentários a ele. E eu posso dizer para cada comum e quer o nome e isso vai funcionar. Lá vamos nós. Então, havia um comentário escrito por Peter. Mas agora eu também posso passar um argumento para comentários. E eu posso dizer, por exemplo, enquanto me dar os comentários fora do ano 2017, por exemplo. Então, se eu rodar este gráfico, você vai fazê-lo funcionar muito bem. Ele vai buscar post com I d três. Ele vai procurar os comentários deste post que podem estar em outra tabela de banco de dados, por exemplo. Ele irá filtrá-los no ano, usando nosso segundo argumento em uma reviravolta todos os dados que eu pedi. Então foi isso para este vídeo. Eram campos e argumentos. No próximo vídeo, vamos dar uma olhada em Alia usos e fragmentos
5. Aliases e de fragmentos: Oi, todo mundo. Meu nome é severo e este é o meu curso em gráfico. Você fora neste vídeo, nós vamos dar uma olhada em um arrendamento e fragmentos. Vamos começar com pseudônimos. Você pode ter detectado um problema com a forma como as consultas são executadas no gráfico You Well, a saída de uma consulta QL gráfico tem o mesmo nome que a própria consulta. Então, neste caso, tomei o exemplo do vídeo anterior e pedi o Post I D três e perguntei seu título e seu conteúdo. Agora observe que eu digito aqui Post e que eu recebo posts de volta na resposta. Mas e se eu quiser obter os detalhes de duas postagens específicas? Eu não posso escrever algo assim, vangloriar i d dois e, em seguida, pegar título e conteúdo fora desse post. Porque se eu fizer esse gráfico, yo vai dizer que os posts rivais estão em conflito uns com os outros porque novamente, eles são o mesmo nome. Então é por isso que aliases existe em gráfico. Você bem, eles permitem que você renomeie o resultado de um campo para qualquer outra coisa que você quiser. Então você pode consultar ambos esses posts dizendo que o 1º 1 é primeiro colocado esperanças e que o 2º 1 é o segundo post. E se eu executá-lo agora, gráfico Carol vai renomear a saída deste post e vai nomeá-lo primeiro post, como você pode ver aqui no objeto de resposta. Agora, aliases são ideais para consultar o mesmo tipo de objetos mais de uma vez. Mas suas consultas também ficam muito repetitivas, como você pode ver aqui neste exemplo. Agora vamos tornar este exemplo um pouco mais completo. Digamos que queremos dividir o título o conteúdo de cada post junto com o nome fora do autor. Então aqui eu tenho que dizer, enquanto eu quero o autor e eu quero o nome do autor e, em seguida, uma cópia colada também para o nosso segundo post. Lá vamos nós agora. Isto é bastante repetitivo. Todo o código entre parênteses é exatamente o mesmo para ambos os posts, e isso nos leva a fragmentos. Usando fragmentos, podemos remover os campos duplicados e colocá-los dentro de um bloco reutilizável de revestimento para que possamos começar definindo o nosso fragmento, e começamos por dar-lhe os nomes vai salvar fragmento, detalhes
básicos do post . E então temos que dizer com que esse fragmento é compatível. Portanto, este fragmento é compatível com o tipo de post. Então eu vou dizer que ele funciona no tipo de post, e então eu vou copiar os campos selecionados em nossos fragmentos. Agora, depois, podemos usar esse fragmento dentro de nossas consultas para que possamos reescrever essas duas consultas
removendo todos os nossos campos e simplesmente dizendo pontos detalhes básicos da postagem. E eu copiaria essa paz lá dentro também, e é isso. Se eu rodar isso agora, eu tenho exatamente a mesma saída. Mas eu não copiei e colei este pedaço de código infinitamente. Eu poderia apenas reutilizá-lo referindo-se ao seu nome. Agora você pode notar que a sintaxe se parece um pouco com o novo operador de propagação em JavaScript . E como você pode ver
, reduz muito o tamanho de York reverencia. Então foi isso para este vídeo. No próximo vídeo, vamos dar uma olhada em como você pode usar variáveis dentro do gráfico. Você vai consultas
6. Variáveis: Oi, todo mundo. Meu nome é ISC Savvier. E você está assistindo meu curso no gráfico You? Bem, neste vídeo, vamos dar uma olhada em como você pode usar variáveis no gráfico You Well, até
agora nós temos escrito argumentos diretamente dentro de nossas consultas, e aqui está um exemplo de um dos vídeos anteriores que nós recuperamos para detalhes fora do post com i d três. E como você pode ver, eu passei o argumento três diretamente na minha consulta. Agora, na maioria dos aplicativos, entanto, os argumentos são dinâmicos e geralmente dependem da entrada do usuário. Por exemplo, os autores podem ter um formulário para criar uma nova publicação de bloco,
portanto, não é uma boa idéia pegar os dados do formulário para serializá-lo. E para inseri-lo nesta consulta. Não só poderia ser um problema de segurança, como também cria uma consulta completamente nova que pode ter se tornado inválida. Em vez disso, podemos usar variáveis insider consultas e, em seguida, passar ao longo da entrada do usuário separadamente. E é assim que funciona. Então vai começar dizendo que nossa consulta exceto uma variável. Então eu vou dizer que nossa consulta aceita uma variável chamada Post I D. E eu vou dizer que é um tipo inteiro, e eu vou dizer que este post I d é necessário adicionando um ponto de exclamação. Então isso significa que a variável é obrigatória e ul gráfico não vai continuar executando esta consulta se não estiver presente agora, depois de declarar a variável, podemos usá-lo dentro de nossa consulta. Então ele vingança detalhes do post com i d três. Mas em vez de três, agora
posso usar a nossa variável post i d. Assim como este. Agora fora do curso, também
precisamos passar o valor desta variável para o servidor. E para fazer isso, criamos um objeto Jason e enviamos junto com esta solicitação para o servidor. E em gráfico, não
há uma seção aqui chamada variáveis de consulta, e tudo que eu faço aqui é escrever uma chave encaracolada e auto gráfico, me
completa e diz, Bem, eu preciso de uma variável post d e então eu pode dar essas variáveis para aqui. Posso dizer que o valor do post I d é igual a três, e então é isso. Se eu executar esta consulta novamente, você verá que ela tem exatamente a mesma resposta que a minha consulta anterior. Mas agora estou usando variáveis de consulta. Agora essas variáveis são enviadas junto com nossos pedidos como, por exemplo, um post marrom. Agora, usando variáveis, podemos manter a consulta o mesmo para todas as solicitações. Mais uma vez, esta consulta aqui nunca mudará. Eu apenas enviaria a entrada do usuário junto com a solicitação, e isso é considerado uma prática recomendada. Não é recomendado usar interpolação de cadeia de caracteres para construir uma nova consulta, porque novamente, isso pode ser um problema de segurança potencial. Então isso não era para este vídeo. No próximo vídeo, vamos dar uma olhada no que são mutações e quais são as diferenças entre inquéritos e mutações.
7. Mutações: Oi, todo mundo. Meu nome é ISC Savvier. E neste vídeo, vamos dar uma olhada nas diferenças entre consultas e mutações. Em gráfico, Você todos Existem dois tipos de consultas de operações e mutações. Você já viu muitos exemplos de consultas nos vídeos anteriores e eles permitem que você busque dados do servidor. E isso é normalmente consultas somente leitura não devem alterar nenhum dado em seu servidor, mesmo que tecnicamente você não poderia obrigá-los a fazer isso. Para alterar dados em seu servidor, você deve usar mutações. Apenas um scurries. As mutações podem retornar objetos e você pode definir quais campos deseja receber como resposta. Então, no caso de um bloco, o A P I pode ter uma mutação para adicionar novos postes de bloco. Esta mutação deve aceitar um objeto Jason com o conteúdo do novo post. Então vamos dar uma olhada em como você pode fazer isso em gráfico. Bem, vamos começar dizendo que queremos executar uma mutação, então vou digitar mutação, abrir colchetes e justiça com consultas. Agora posso dar-lhe o nome de uma mutação. Então eu já criei uma mutação no Post e isso, exceto uma variável post, que é objeto adjacente contendo os detalhes dos meus novos posts. Então isso pode ser o título. O meu novo bloco põe o meu bloco. Post também tem algum conteúdo e deve ser conteúdo fora dos meus posts de bloqueio. Ele também tem um autor, e esta é uma referência à idéia do altar. E assim, neste caso, são apenas alguns dados aleatórios que eu gerei em um banco de dados. Então estes são os dados que passamos para esta mutação. E, em seguida, também podemos dizer quais dados queremos receber de volta do gráfico Você bem, e podemos receber saco o título fora do nosso bloco ostenta. E posso até perguntar pelo autor. E posso pedir o nome do autor que está associado a esta identificação aqui. Agora, no vídeo anterior, eu disse que colocar esses dados diretamente na consulta não é uma boa idéia. Em vez disso, devemos usar variáveis, e isso também é possível com mutações. Então é isso que as consultas começarão dizendo que nossa mutação leva uma variável post como entrada. Então eu não vou fazer isso aqui. Eu vou dizer que nós estamos indo para receber um post variável, e isso deve ser off type post input. Agora, possuem entrada é um tipo que eu tenho um definido no servidor Ural gráfico. E mais tarde no curso, mostrarei como você pode fazer isso sozinho. Agora esta variável é necessária. Então eu vou adicionar um ponto de exclamação a ele. Agora, depois, posso começar a usar esse insight variável ou campo de postagem. Então, em vez de dar os objetos imediatamente aqui, eu vou cortar esse texto, e eu vou apenas referenciar a variável post. E agora eu posso passar ao longo do nosso post como uma variável muito gráfica. - Você? Bem, e aqui eu posso passar ao longo do objeto para o nosso bloco. Ambos. Então este foi o objeto que eu criei, hum, com conteúdo de título e autor. Mas devemos embrulhar isso dentro de outro objeto tão gráfico aqui, me
propor. E o objeto contém um campo de postagem. Este campo de postagem contém esse objeto. Então eu deveria fechá-la. Tudo bem? E eu deveria acrescentar algumas citações aqui e lá vamos nós. É assim que uma mutação se parece. Se eu sei executado, isso irá inserir um novo post de bloco no meu banco de dados. E como você pode ver, recebemos o título e o nome do autor como uma resposta, exatamente como pedimos aqui. As mutações se parecem exatamente com Clarice, e elas também têm uma resposta previsível. Então, qual é agora a verdadeira diferença entre consultas e mutações? Bem, primeiro lugar, você pode ver instantaneamente se uma operação UL gráfica mudará algo no servidor ou não . Agora, isso é para nossa própria conveniência. As consultas só lerão os dados do servidor enquanto as mutações serão alteradas ou adicionarão novos dados a ele. A outra grande diferença é que as consultas estão sendo executadas em paralelo enquanto as mutações são executadas em Siris uma após a outra. Isto é para evitar condições de raça, uma vez que uma mutação pode inserir dados que são exigidos
pela próxima mutação. Então foi isso para este vídeo e também para esta seção. Na próxima seção, vamos nos preparar para escrever seu próprio gráfico seu l a p I. Vou mostrar-lhe como ele é conjunto da estrutura do projeto que dependências vamos usar e muito mais
8. Como configurar: Oi, todo mundo. Meu nome é ISC Soviet. E neste vídeo, vamos configurar a estrutura de diretórios para o nosso gráfico você l a p I. Então aqui eu abri um diretório vazio em código de estúdio visual, e vamos começar criando alguns diretórios que formarão nosso projeto. Vou começar criando um diretório para todo o nosso código-fonte. Eu vou ligar. é o nosso C. Agora, dentro deste diretório, eu vou fazer outra pasta para o nosso gráfico que você vai esquema. O que isso é algo que discutiremos em vídeos posteriores. Agora, esquema, olhos feitos de consultas, tipos e mutações. Então eu vou criar um subdiretório para cada um deles. Então um para consultas, um para tipos e outro para mutações. Agora vamos também criar alguns arquivos de espaço reservado para o nosso esquema. Vamos começar com consultas e mutações. Vou criar um arquivo por consulta e permutação. Ao fazer isso, certificamo-nos de que cada arquivo corresponde a apenas uma consulta ou uma mutação e também mantém nossos arquivos curtos e nosso código gerenciável. Então, para mutações, eu quero que os clientes sejam capazes de criar novos posts em bloco e postar comentários através do nosso a p I . Então eu vou criar duas mutações. O 1º 1 Eu vou chamar adicionar comentários ponto Js e eu vou criar um 2º 1 que vai ser adicionar Post que Sim. Agora vou deixar esses arquivos vazios. Trabalhará neles mais tarde neste curso para consultas. Eu quero que os usuários sejam capazes de obter todos os posts no bloco para obter detalhes sobre um
post específico e obter os detalhes sobre um autor. Então eu vou criar três arquivos dentro de consultas. Eu vou criar um arquivo posts que eu pensei jazz, que vai devolver todos os posts em nosso blawg. Eu vou criar post que Js, que vai retornar os detalhes sobre um único post. E então eu vou criar um arquivo digests autor, que vai retornar algumas informações sobre autor e novamente, vamos implementar esses arquivos mais tarde e também saber que você pode nomear esses arquivos como quiser. Só estou escolhendo algo que faz sentido aqui. O próximo é tipos. Agora, se você está familiarizado com objeto ou em programação do que você pode comparar tipos em
UAL gráfico para interface é um objeto orientado linguagens de programação. Eles definem quais campos um tipo tem, por exemplo, um tipo para gabarito de bloco pode ter um título, um conteúdo e um campo de autor. Agora, no caso de r E B I, temos três tipos grandes. Temos postos de bloqueio. Temos autores e temos comentários. Eu os detalhei na primeira seção deste curso. Então vamos criar um arquivo para cada um deles que eu vou criar autor pensou sim , criar comentários que Jess e eu vamos criar. Põe isso, Jess. Tudo bem, então agora que temos os blocos de construção individuais para o esquema, eu vou criar no próximo arquivo RGs dentro do diretório do esquema. E neste arquivo, vamos importar todos os outros arquivos e fazer o esquema completo. Eu também vou criar um arquivo indexado na raiz do nosso diretório fonte, e este outono será responsável por carregar o gráfico você uma biblioteca para carregar nosso esquema e para executar consultas agora para terminar. Nós também vamos precisar de uma pasta dist que eu vou colocar nas raízes do nosso projeto. Agora, esta pasta irá conter versões otimizadas fora do nosso código-fonte e será gerado pelo babble on Isto irá garantir que a nossa cotação seja executada em qualquer versão desligada. Nada de Js. Então, com aquele tolo criaria é hora de terminar este vídeo. Nós montamos a estrutura para o nosso projeto. No próximo vídeo, vamos instalar as dependências externas que precisarão dar vida ao nosso A P I .
9. Como instalar dependências: Oi, todo mundo. Neste vídeo, vamos instalar as dependências que vamos usar para construir nosso gráfico você l p i agora para Bill r a p I. Nós não vamos reinventar a roda. Em vez disso, vamos confiar em bibliotecas de terceiros que já foram construídas e foram testadas em
batalha gerenciando dependências. E não, Jess, é muito fácil porque temos NPM agora, caso não saibas, NPM significa gestor de pacotes de notas. E esta ferramenta nos permite listar todas as dependências de nosso projeto em um único arquivo agora, depois e PM pode pegar esse arquivo, lê-lo e instalar todas as dependências em nossos projetos. Então, no começo, vamos criar um arquivo do Jason empacotado. Este é o arquivo que vai dizer no PM tudo o que há para saber sobre o nosso projeto agora. Você pode criar um manualmente, mas também podemos pedir ao NPM para gerar um para nós no diretório raiz fora do nosso projeto. E eu vou fazer isso. Vou abrir o terminal, e vou fazer o NPM nele. E esse utilitário nos guiará por algumas das coisas que devem estar em nosso pacote. Que Jason e nós poderíamos apenas digitá-lo em nosso terminal. Então perguntou-nos qual é o nome do pacote deles? Bem, eu vou dizer gráfico UAL ap. Eu bloqueio diria, esse é o nome do nosso pacote. Vamos mantê-lo no número da versão. Podemos dar uma descrição, o que não vou fazer agora. Você pode dar um ponto de entrada. Vou deixar isso por defeito também. Deixe um homem vazio na mesa. Obter palavras-chave do repositório. Autor. Vamos deixar tudo vazio. E então ele perguntou Este é este arquivo, ok? Vou dizer que sim. Isso está tudo bem. E agora o banco criou um pacote que Jason arquivo Inside Art diretório. Então, agora que temos este arquivo, podemos começar a instalar não são dependências. Agora, nós não vamos escrever nossa própria biblioteca gráfica Ural. Isso será inútil. Em vez disso, vamos usar a implementação oficial do enxerto ul pelo Facebook para instalá-lo. Eu vou simplesmente executar NPM,
instalar traço, traço seguro e, em seguida, gravou você. Bem, então aqui eu peço ao NPM para instalar um pacote. O nome do pacote é gráfico você bem, E ao dizer que ele deve salvar essa dependência, ele vai realmente adicionar a dependência ao nosso pacote que arquivo Jason. Então, se eu executar este NPM vai sair, ele vai Fatchett gravou você. Bem, ele baixará todas as dependências que o UAL gráfico tem, e salvará UAL gráfico como uma dependência. Dentro estão embalados Jason Fall. Então, como você pode ver aqui, ele adicionou uma nova propriedade a este objeto, que é chamado de dependências. E aqui diz que a Graphic UL está agora com a pendência do nosso projeto e que
exigimos pelo menos a versão $0.11.3. Você também pode ver que o NPM criou um novo diretório dentro do nosso projeto e isso é chamado módulos de
nó. Agora, este diretório é o dedão inicial. Todas as dependências externas do nosso projeto. Nós nunca deve enviar módulos de nota para um sistema de controle de versão e nós nunca deve mudar arquivos dentro deste diretório. Agora, se você olhar dentro do diretório, vemos que há uma pasta de curral gráfico lá, bem como uma pasta para todas as dependências que criam suas próprias necessidades. Então, neste caso, enxerto você precisa bem dele,
rolar e, em seguida, ele está bem aqui. Escusado será dizer que este diretório pode ficar muito grande depois de ter adicionado algumas dependências. Mas isso é muito bom. E vamos fechá-lo por enquanto. E agora vamos instalar a próxima dependência que vamos precisar. E esse é Babel. Agora, durante este curso, vou usar alguns dos novos recursos em JavaScript,
como classes, como classes, funções de
seta e operadores de propagação. Esses recursos, no entanto, podem não estar disponíveis em tempos de execução de scripts Java mais antigos. Então balbuciar é uma pequena ferramenta que levará nosso código. Mas toda a nova sintaxe e ela vai acontecer. Vou entrar em código que cada tempo de execução do jazz não pode entender. Isso é muito útil para quando você deseja implantar seu código em,
por exemplo, por exemplo, um serviço de nuvem que usa um tempo de execução mais antigo. Vou usar o mesmo comando da última vez. Uma pequena mudança. Então eu vou dizer NPM instalar Dash Dash Safe. Mas vou dizer para salvar a morte e isso vai dizer à NPM que balbuciar é independência que
só é necessária durante o desenvolvimento. Nós não precisamos de balbuciar em nossos ambientes de produção, então NPM seguro traço surdo e mudo para dizer que ele deve instalar a ferramenta de batalha cli. Ele deve instalar a predefinição padrão para o babble. Esta é a configuração padrão do Bama. E nós vamos precisar de um plug balbuciante que vai transformar nosso operador de spread em algo que o tempo de execução do script de trabalho antigo Kenner stand. Então eu vou executar isso e você vai ver que demora um pouco mais porque Babel tem muito mais dependências do que gráfico. Você. Bem, então agora que ele está terminado, podemos ver que ele adicionou outra seção em nosso pacote que Jason arquivou essas ou fez dependências de
desenvolvimento novamente. Estas são as dependências que você só precisa durante o desenvolvimento, não na produção. E se eu abrir o diretório de módulos de nota e clicar em atualizar, você pode ver que há um monte de novas dependências instaladas em nosso projeto. E esse é o poder de usar um gerenciador de pacotes. Nós não temos que gerenciar tudo isso sozinho com o suficiente para sair e baixar
cada um desses projetos. Não, NPM fará isso por nós automaticamente. Vou fechar esta pasta. Eu disse que poderia ficar bem grande. Isso não é problema nenhum. E foi isso para este vídeo. Nós instalamos todas as dependências que vamos usar para construir nosso próprio gráfico. Você vai ser eu agora no próximo vídeo, Vou mostrar-lhe como é uma boa figura balbuciar.
10. Como configurar o Babel: Oi, todo mundo. E bem-vindo de volta ao meu curso em gráfico você? Bem, no vídeo anterior, instalamos as dependências necessárias em nosso projeto. E uma dessas dependências é Babel. Agora vamos usar o babble para garantir que possamos usar com segurança todos os novos recursos
na linguagem de script Java sem ter que se preocupar com compatibilidade. Então vamos primeiro dar uma olhada por que precisamos balbuciar escrevendo algum casaco. Vou abrir o arquivo Js de ponto índice aqui na raiz do meu diretório fonte. E vamos dizer que eu quero importar a biblioteca do mal gráfico e depois fazer algo com ela . Bem, eles não escrevem importação. Eu quero importar gráfico você bem, e eu quero importá-lo do gráfico seu pacote. Depois disso, vou fazer um registro do cônsul dizendo oi para provar que o código foi executado com sucesso . Agora deixe-me tentar executar o script. Eu vou abrir o terminal e quando você diz nós SRC em seguida que Sim, vai apertar enter. E como você pode ver, nenhum GS retorna e nunca E ele diz que encontrou uma importação de token inesperada para que ninguém que ela tenha não entenda este novo Syntex aqui para importar módulos. Podemos corrigi-lo usando a sintaxe antiga,
mas isso não é muito eficiente. Podemos corrigi-lo usando a sintaxe antiga, Em muitos casos,
o índice de laço é muito mais curto e tem algumas características adicionais agradáveis. Então é exatamente isso que Babel está aqui para resolver. Agora, Babble depende de um arquivo de conflito para dizer como deve ser transplante. Seu casaco babble pode carregar esta configuração a partir do pacote que arquivo Jason ou do arquivo
Babel ou C. Vou usar a segunda opção, e vou criar um novo arquivo no meu diretório raiz. E eu vou chamar isso de Dot Babble RC. Neste arquivo, vamos criar um objeto Jason, e vamos dizer quais predefinições estão disponíveis. Então, no vídeo anterior, instalamos a predefinição final, que é a predefinição padrão que é usada pelo balbucio. Então eu vou colocar isso bem ali e então nós também podemos dizer quais plugins estão disponíveis e notei que o código do Visual Studio ajuda está aqui fora. Ele sabe que este arquivo é um arquivo de configuração Babel e presentes é todas essas dicas noites. Então eu vou dizer que vamos usar alguns plugins e vamos usar os objetos de
transformação. Descanse, Blufgan. Então, que estão espalhados. Operador será transpired corretamente. Ok, então agora o balbuciar sabe quais predefinições estão disponíveis e quais plugins estão instalados. E não vamos verificar se isso acontece corretamente. ALS são casaco. Então eu vou abrir o pacote que Jason arquivo e neste arquivo, eu vou criar um novo script. Agora, se você nunca criou o script e MPM antes, tudo que você precisa fazer é dar um nome e, em seguida, um comando que ele deve executar. Então aqui ele já tem um script de teste. Só vou adicionar um. Vou chamar o meu guião “Construído” agora. Isso deve executar balbuciar mulher atacou balbuciar, e isso aceita um monte de parâmetros. Agora, o 1º 1 diz a Babel onde está o nosso código-fonte. Então, no nosso caso, é apenas o diretório de origem THSRC diretório. Agora, depois disso, também
precisamos especificar onde balbuciar deve armazenar as versões transpired do nosso casaco. Nos vídeos anteriores, criamos essa pasta apenas para esse propósito. Então eu vou dizer que o diretório de saída, O lá fora é esta pasta. Tudo bem, então agora eu vou salvar este arquivo, e nós vamos executar este script e abriríamos um terminal no tipo NPM run construído. Vou apertar Enter. E como você pode ver, babble encontrou todos os nossos arquivos fonte aqui. E gerou novos arquivos para eles neste mais completo. Então vamos abrir o nosso original no próximo ponto Js arquivo. Você pode ver aqui em Port Graphic UL a partir do pacote gráfico UL. Mas se eu agora ir para a pasta dest e eu abri o arquivo index lá, então você pode ver que a nossa declaração de importação se foi e bam, A lista está agora usando a sintaxe exigem tradicional, algo que é compatível com versões mais antigas do nota. E vamos fazer isso agora mesmo. Então agora eu vou executar o knowed novamente, e em vez de executar a próxima queda em nosso diretório fonte, eu vou executar o próximo arquivo em nosso diretório DIS. E lá vai você. O nosso guião funciona. Não há mais erros. E é apenas um príncipe alto para o nosso cônsul. Agora, se você é um pouco como eu, você vai pensar que executar esses comandos uma e outra vez, é muito demorado e você vai estar certo. Então vamos mudar nosso script de construção para que ele seja executado balbuciar e, em seguida, executar automaticamente nosso código são indexados em seu traseiro para então eu vou voltar. Mas eu vou voltar para o nosso arquivo do Jason empacotado. E aqui temos balbuciar, que gera as versões de transplante. E depois disso, eu vou dizer que ele deve executar nó isso no próximo ponto Js arquivo. Tudo bem, então vamos fazer mais uma vez. Vou dizer que o NPM foi construído. E agora o script transmite tudo com Babel e, em seguida, executa-o automaticamente
também . Tudo de uma só vez. Então foi isso para este vídeo. Estamos quase terminando os preparativos. No próximo vídeo, vamos mostrar-lhe o banco de dados fictício que vamos usar como base para o nosso gráfico você l a P I
11. banco de dados de Dummy: Oi, todo mundo. Meu nome é X Avi, e neste vídeo, vamos dar uma olhada no banco de dados muito simples que vai poder são gráficos você l p i. Agora eu não queria aborrecê-lo com um vídeo de mim mostrando como eu criei todos esses dados fictícios . Então eu preparei um pequeno banco de dados e eu coloquei em nosso diretório fonte e é chamado banco de dados
falso. Então vamos dar uma olhada lá dentro. Como você pode ver, é apenas uma classe simples contendo um monte de propriedades. Portanto, tem propriedades que armazenam autores que armazenam mensagens de bloco e que armazenam todos os comentários. Agora todos os dados são armazenados em uma área simples. É uma área de objetos que você pode comparar. É duas tabelas em banco de dados irregular, uma tabela para autores, uma tabela para mensagens de bloco em uma tabela para comentários. Eu também fiz alguns métodos para acessar esses dados, e aqui está um simples. Se eu rolar para baixo, você pode ver que há obter mensagens de bloco e este é muito simples. Ele apenas retorna todas as mensagens de bloco no banco de dados. Agora, no meu exemplo, ele retorna as nossas postagens fora do bloco. Que é o Capitão Memory, claro. Mas na realidade, vez de apenas retorná-lo aqui, você iria para o banco de dados, você faria uma conexão, você iria consultar o banco de dados e então você iria retornar os dados fora do banco de dados para que você não diria apenas retornar e, em seguida, uma área. Você pode pensar nesses métodos como uma camada de acesso ao banco de dados em Lee. Uma parte do seu aplicativo deve ser capaz de falar com o seu banco de dados. O resto deve usar métodos que a camada de acesso do banco de dados exposta. Então, se você quiser escrever seu próprio gráfico L a p I para um bloco, por exemplo, que você pode manter todos esses métodos, mas você só tem que re implementar seus corpos. Então aqui você teria novamente que fazer uma conexão com o banco de dados. E então agora eu também tenho alguns métodos que filtram alguns de nossos dados. Então, por exemplo, obter mensagens de bloqueio. Este busca os detalhes de um post bloco com um I D específico e tem a mesma coisa para buscar um autor particular ou buscar o post de um autor ou buscar todos os comentários que têm post tem. Eu tenho um monte desses métodos agora. Eu também implementei um método que é responsável por adicionar novos dados em nosso bloco. E então aqui há Avenue Block Post, que leva um parâmetro posts, que é um objeto novamente com todas as propriedades do Post, e nós acabamos de adicionar à área bem aqui. É tudo muito, muito, muito simples, mas faz o ponto atravessar. Então, novamente, na realidade, você iria re implementar esses métodos e você provavelmente iria querer se conectar a um banco de dados como a minha sequela entre você seria, ou talvez uma versão em nuvem como Dynamodb. E agora os relacionamentos? Enquanto cada um desses objetos são completamente auto-contidos, não
há referências de um objeto para o outro. Mas se você olhar mais de perto e bloquear post, por exemplo, você pode ver que cada post bloco tem uma propriedade chamada autor, e nele nós armazenamos a idéia do autor que escreveu este particularmente bloco posts. Então, se quisermos buscar o nome fora do autor de um post de bloco que devemos tomar o post bloco, devemos tomar a propriedade do autor e, em seguida, devemos consultar o banco de dados para autor com este I d e, em seguida, podemos buscar o seu nome. Agora, você pode pensar que criar código que navegue por todos esses relacionamentos será muito
demorado , e você estaria certo. Mas, felizmente, não
precisamos fazer isso, porque gráficos todos vocês são muito inteligentes. Você só tem que ensiná-lo a buscar cada recurso individualmente. E então você pode dizer como as relações são formadas. Assim, você não precisa usar operações conjuntas complexas como no SQL. Tudo bem, então foi isso para esta seção foram feitos com todos os preparativos na próxima seção, vamos começar a construir nosso próprio gráfico You l A p i em cima deste pequeno
banco de dados, eu vou mostrar-lhe como criar um esquema. Então esse gráfico você será capaz de dar sentido a todos os nossos dados.
12. Tipos de objetos: Ei, todo mundo minando MISC Soviético. E neste vídeo vamos implementar os tipos de objetos gráficos para comentários do autor e bloquear posts. Agora um tipo de objeto e UL gráfico. É como uma classe e programação orientada a objetos. Basicamente diz astuto, bem, que tipo de objetos que seu P eu posso devolver e que rixas eles têm. Então aqui temos um exemplo Graphic ul Query. Todos esses campos são definidos por tempos de objeto. Então, em outras palavras, se um tipo de objeto para publicação não contiver um título, você não poderá pedir um título em sua consulta. Bastante direto. No entanto, os campos superiores são diferentes. Eles são os pontos de entrada para suas consultas, e esses são definidos de forma diferente. Veremos isso mais tarde neste curso. Então, neste vídeo vamos nos concentrar em implementar os tempos do objeto. Ok, então aqui estou eu no código do Visual Studio, e vamos começar implementando um tipo de objeto para autor. Agora, nos vídeos anteriores, criamos nossa estrutura de diretórios e o tipo de objeto para autor está sob o
diretório tipos sob esquema. Então eu vou abrir fora dos Js e eu vou começar criando ou exportando uma nova constante chamada autor. E isso vai ser de novo tipo de objeto graf que el agora em sua regra construtor, passar em objeto. E este objeto conterá todos os detalhes sobre nossa entidade autor. Agora, antes de continuar, precisamos importar o módulo necessário. Então, neste caso, estavam usando gráfico ul tipo de objeto, mas script Java não sabe o que é. Não é a multa em nosso arquivo, então precisamos importá-lo do enxerto em todo o pacote primeiro. Então eu vou escrever gráfico de importação que el tipo de objeto a partir do gráfico seu pacote. Certo, então a seguir, podemos preencher este objeto aqui. Cada tipo de objeto deve ter um nome e uma descrição e alguns campos. Vou criá-los. Agora. Vou chamar esse tipo de objeto de autor. Vou dar uma descrição. Eu vou dizer todos os detalhes fora do autor no site, e eu vou dar-lhe alguns campos, que vai ser uma função estreita. Agora, você pode se perguntar por que o enxerto precisa saber tudo isso. Isso é porque quando você está usando gráficos, ele vai usar o nome e a descrição para guiar as pessoas em torno de seu A P Eu costuro esses pedaços de cordas. Aqui. Estes textos aparecerão duas pessoas usando o seu A P I através de gráfico. É muito fácil para eles se familiarizarem com seus oito pais , então vamos preencher os campos. Agora vamos dar uma olhada no grande banco de dados para ver o que Fields autor tem lá. Então aqui podemos ver que um autor tem uma idéia em nome e um endereço de e-mail. Agora também sei os tipos de thes campos para idéias. Um nome de string é uma string, e também e-mail é uma força agora. Por que isso é importante? Bem, isso é porque gráfico você vai um tipado estaticamente. E isso significa que temos que especificar que tipo cada destemido. Então vamos voltar para alterar e vamos para os campos Agora eu vou começar com I D.
E eu vou dizer que eu d é do tipo gráfico Você bem, força novamente. Estes objetos especiais do ar. Estes são momentos especiais que o gráfico geralmente usa para validar a consulta vinda de usuários, mas também para saber de antemão que tipo de dados ele retornará para o usuário. Então, vamos adicionar o nome poucos também, que também é uma string UL gráfica e os campos de e-mail, que também é digitar chave de gráfico. Bem, força agora, assim como antes. Vamos importar Graphic ul String antes que esqueçamos. Então eu só vou adicionar importação aqui, e eu vou dizer que nós também vai querer importar string Graphic UL a partir do pequeno
pacote astuto . Tudo bem, então isso é tudo que temos que fazer para implementar nosso objeto autor. Vamos continuar fazendo um tipo para comentários. Agora, eu vou começar copiando um disco devido porque muito dele é apenas um código de placa e podemos reutilizá-lo para comentar. Tipo de objeto. Então, vou abrir isso em comum. Sim. Vou colar todo o casaco aqui. E eu obviamente vou mudar algumas coisas, então eu vou exportar variável comum. Vou mudar o nome. Vou mudar a descrição. Vou dizer detalhes sobre os comentários. E agora, obviamente, também
precisamos mudar alguns desses campos. Então vamos dar uma olhada no banco de dados da figo. Quais campos que um comum tem e aqui pode ver. Common tem uma idéia postou o nome e um conteúdo campos Agora vamos ignorar o Post I
D. Por enquanto, porque esse campo cria um relacionamento com o objeto Post. Mas ainda não criamos isso, então vamos implementar isso mais tarde. Então vamos voltar ao tipo comum aqui. Vou remover esses campos porque temos que reimplementá-los. Eu vou dizer que esse comentário tem um i D. E desta vez não é do tipo string. Na verdade, é tipo gráfico que você vai em particular. Olhe para trás agora é uma imagem. Não é mais uma corda, então temos que refletir isso em nosso futuro aqui também. Um comentário também tem o nome da pessoa que o escreveu, que é obviamente de cadeia tipográfica. E tem o conteúdo fora dos próprios barcos, que também é fora da força tipográfica UAL. Agora, antes que esqueçamos, vamos às importações necessárias estavam usando o gráfico que você vai para aqui, mas não estamos importando. Então vamos consertar isso agora mesmo. Lá vamos nós. Essa é a implementação para comentários. Tipo de objeto. Agora vamos passar para a última vez que precisamos,
e esse é o tipo de objeto para gabaritos de bloco. Este é um pouco mais complicado porque tem dois relacionamentos. Ah, Block Boast tem um autor e pode ter alguns comentários. E nós definitivamente queremos acessar esses dois relacionamentos através do nosso ofício. Então, novamente,
eu vou começar copiando o código do nosso tipo comum aqui,
e eu vou colá-lo em nosso arquivo post Js. Então, novamente, eu vou começar copiando o código do nosso tipo comum aqui, Vou começar de novo mudando algumas dessas coisas aqui. Então, vamos exportar postagens valiosas. Vamos dar os posts de nome e a descrição será todos os detalhes de um posto de bloqueio. Então vamos dar uma olhada e banco de dados figo novamente para ver o que brigas um bloco post chapéus. E aqui podemos ver que o bloco Post tem um I.D.
que é um júri interjurado. Neste caso, ele também tem um conteúdo de título e um autor. Agora, novamente, este campo de autor é uma referência a um autor. É que cria uma relação. Então vamos precisar definir o poço Aziz, então vamos adicionar nossos campos. Vamos voltar para postagens s para que possamos manter i d. Vamos mudar de nome para título e vamos deixar conteúdo também, e os tipos já estão corretos. Tudo bem, então isso é o básico feito, mas último Agora implementar a relação que um Post tem com um autor. Então vamos adicionar um autor de campo aqui, e este campo vai ser um pouco especial. Então vamos dizer que o tipo deste campo é do tipo autor, mas isso não é suficiente. Nós também precisamos dizer gráfico para você. Bem, como ele pode obter os detalhes sobre este autor e isso requer outra chamada para o nosso banco de dados . Então, precisamos adicionar uma função de resolução, e esta função de resultado. Eu vou usar em uma função de seta aqui também, e ele vai receber uma cópia fora do nosso objeto post, e então nós podemos fazer qualquer coisa que queremos com esse objeto post. Mas devemos retornar as informações sobre o autor que está vinculado a este post de bloco. Então, no banco de dados da figa, eu tenho um método para isso. Chama-se Autor, e vamos devolvê-lo aqui. Vamos dizer “Return Big Database Dot Get Autor”, e vamos dar a ideia do autor. E isso é, claro, Stort. Publicação de Insider nos campos de autor. Então o que estamos essencialmente fazendo é esta variável bem aqui. Este post ele vai obter uma cópia completa de um desses objetos. E o que precisamos para conseguir o autor? O que? Tomamos o campo autor aqui com tomar seu valor, e então passamos isso para obter o método do autor para obter os detalhes sobre um autor. Tudo bem, então não vamos esquecer de fazer as importações necessárias. Então eu vou adicionar uma importação para o autor. Vou importar autor do tipo de autor, que está no mesmo diretório. E eu também preciso importar banco de dados falso, que fica nas raízes do nosso diretório fonte. Tudo bem, assim. Então agora podemos implementar outro relacionamento
mais complexo. Block. Vangloriar-se pode ter um ou mais comentários. Então dizemos que o campo comum será do tipo comentário, mas será uma lista de comentários. Então, como é que fazemos isso? Bem, isso é adicionar outro campo aqui. Vou chamar isso de comentários, e isso é um comentário de tempo, mas novamente, precisamos de uma lista de comentários, então vamos envolver ou tipo comum dentro de um novo objeto de lista de Cuba graf como esse. E então agora gráfico Você bem sabe que você não vai retornar um comentário, mas que você pode retornar um braço ou comentários com este campo. Então, novamente, vamos adicionar uma função de resultado. Esta função de resultado receberá nosso post novamente. Eu vou usar uma função de seta aqui, e nós queremos retornar grande banco de dados, não obter comentários para postagens. E vamos passar a informação do posto que estamos usando agora. E não vamos novamente esquecer de fazer as importações necessárias. Óbvio, astuto. Bem, lista aqui. Por isso, precisamos de importante a partir do gráfico seu pacote. Então agora sabemos como fazer essas relações. Vamos voltar para o tipo de autor agora. Seria interessante se as pessoas pudessem solicitar todos os posts em bloco que foram escritos por um autor
específico. Então vamos adicionar um campo de postagem ao tipo de objeto para autor, então eu vou chamá-lo de Post. Vai ser um tipo de postagem, mas vai ser uma lista de postagens. Então é um novo objeto gráfico Lista Ural com nosso tipo de objeto posts. E também precisamos de uma função de resultado que vai receber o autor atual. E o que queremos fazer é devolver o ponto de banco de dados falso, tirar postagens ,
autor, e vamos passar o autor e, novamente, não nos esqueçamos de fazer as importações necessárias. Estou usando gráfico que você irá listar do pacote gráfico UL. Também preciso importar o tipo de objeto posts do diretório atual. E eu preciso importar o banco de dados da figa, que novamente fica nas raízes do nosso diretório fonte. Tudo bem, então foi isso para este vídeo que implementamos em todos os tipos de objetos gráficos novamente, estes UAL telegráfico, que sente querer expor aos nossos usuários e como ele deve lidar com a relação entre dados. No entanto, também
precisamos telegrafar chave bem, como ele pode buscar as entidades em primeiro lugar. Então, agora nós dissemos à Graphic UL quais campos uma publicação de bloco tem, mas ainda não lhe dissemos como pode realmente buscar uma publicação de bloco do banco de dados. Então, no próximo vídeo, vamos corrigir isso. Vamos implementar Aquarius
13. Consultas: Ei, todo mundo. No vídeo anterior, implementamos os tipos de objeto que são usados por ofícios UAL para saber quais campos uma entidade tem. Ele também ajuda gráfico. Você entenderá a relação entre objetos. Mas há um problema. Aqui está gráfico sua consulta que busca detalhes sobre um bloco posts e sobre o autor que os escreveu. Agora, após o gráfico de vídeo anterior, UL é capaz de buscar os detalhes sobre um autor porque implementamos uma função de resolução que lida com a relação entre post e autor. No entanto gráfico UL não sabe como ele pode buscar o campo de rota aqui. Para isso, precisamos implementar algumas consultas. Agora vamos implementar três consultas. Um para obter todos os posts de bloco, quer obter detalhes sobre um post específico e quer obter um autor específico. Agora, os dois últimos exigirão um argumento. Então vamos começar. Então eu estou de volta no código do Visual Studio e vamos começar implementando a consulta de gabaritos . Então eu vou abrir o arquivo post Js dentro do nosso diretório de consulta, e eu vou começar exportando um objeto padrão. Eu vou exportar padrões, e dentro deste objeto eu vou criar um culto de propriedade postagens. E este também será o nome da nossa consulta. Então escolha-o sabiamente porque as pessoas vão usá-lo quando eles usam o seu A P. Eu agora postagens novamente é um objeto que contém os detalhes sobre a nossa consulta. Então primeiro temos que falar gráfico você Bem, que tipo de dados isso retornará no nosso caso. Ele irá retornar uma lista fora de mensagens de bloqueio. Então o tipo é novo. A UL gráfica lista as postagens, e também precisamos dar uma descrição. Então eu vou dizer, obter uma lista de mensagens recentes de bloqueio. É uma bela descrição. Mais uma vez, esta descrição aparecerá quando as pessoas estiverem usando gráficos. Então, montar uma boa descrição ajudará seus usuários a adotar seu A P I mais rápido porque eles recebem um pouco de ajuda. Agora, também
podemos aceitar argumentos se quisermos ou se precisarmos. Mas neste caso, não
precisamos aceitar nenhum. Então eu vou deixar este objeto vazio agora. Finalmente, precisamos novamente de uma função de resultado que vai realmente sair para o banco de dados e buscar os dados que precisamos. Então vou escrever “Resolver”. Vou dar-lhe uma função. E desta vez vou ligar para a base de dados da Fig. e vou conseguir uma lista dos postos de bloqueio. Então, novamente, no nosso caso, banco de dados
FIG é uma abstração de banco de dados Ele Hamels toda a comunicação com no
banco de dados real . Então, na realidade, você pode usar o mesmo código que eu faço aqui. Mas você só precisa mudar a implementação do método de postagem do bloco de gás. Ok, então é isso para esta consulta. É bem simples. A única coisa que preciso fazer é ter certeza de que importamos as
dependências necessárias . Então precisamos gráfico Você A lista do pacote curole gráfico. Precisamos do tipo de objeto post do nosso diretório tipos, e precisamos de banco de dados fig, que fica na raiz do nosso diretório de origem. Então vamos seguir em frente agora e implementar a consulta do autor. Então eu vou copiar e colar este código, porque novamente, muito deste código é semelhante para autor, Então eu vou abrir o arquivo de ponto do autor Js dentro do nosso diretório de consulta. Eu vou colar todo o código aqui, e eu vou começar mudando o nome deste campo aqui. Ligue para este autor e eu também vou mudar a descrição. E eu vou dizer que essa consulta recebe um autor específico. Lá vamos nós. Também precisamos mudar o tipo. Então agora não retornaremos uma lista de postagens. Vamos realmente retornar detalhes sobre o autor. E também precisamos de alguns argumentos agora porque se eu quiser obter os detalhes sobre um
autor específico do que gráfico, você precisará saber qual autor eu quero obter os detalhes sobre. Então eu vou dizer que esta consulta, exceto no argumento, chamada I d. E este argumento deve ser do tipo gráfico UAL strength. Mas podemos fazer mais aqui. Esta consulta não pode funcionar sem um argumento. Se você quiser os detalhes sobre um autor, você tem que especificar em um d se o mal gráfico não tem um i d. Então ele não pode obter detalhes sobre um autor porque ele não sabe qual autor ele
precisa buscar. Data em Para que possamos embrulhar este gráfico. Você vai string dentro de um novo gráfico UAL non no objeto e isso vai dizer gráfico você. Bem, que o argumento é necessário e, de fato, gráfico. Você al valida consultas antes de executá-las. E assim, se ele vê que o argumento da idéia está faltando, ele não vai mesmo executar sua consulta. E ele não vai interagir com seu banco de dados muito útil. E, finalmente, precisamos implementar o que precisamos para mudar melhor a função de resultado. Então esta função agora receberá dois parâmetros em vez de um. Primeiro, ele receberá o objeto pais
e, em segundo lugar, receberá todos os argumentos para essa consulta. Agora, eu poderia escrever algo assim. Eu poderia dizer argumentos de pais, e então eu poderia chamar o grande banco de dados e eu posso dizer obter autor. E então eu vou pegar os argumentos, que é basicamente uma cópia deste objeto, mas então preenchido com valores reais para que eu pudesse dizer argumentos pensei que eu d. Mas eu também posso pegar diretamente o argumento i D usando o script Atmos seis destruindo atribuições e o que eu posso fazer é em vez de usar argumentos, eu posso usar Syntex assim, e o que isso vai fazer é isso vai extrair o campo I D do objeto que esta função recebe um segundo parâmetro e então eu poderia apenas usar eu d assim. Então é uma sintaxe um pouco mais curta. Também é sintaxe nova, então vamos manter isso por enquanto. Tudo bem? Então, novamente, para terminar essa consulta, eu preciso consertar nossas importações. Não precisamos de gráficos. Você lista bem mais. Mas nós, no entanto, precisa de string ul gráfico, e nós precisamos gráfico que el non. Não. E também precisamos importar autor, e não precisamos mais de postar. Então eu vou importar o autor do post do autor, e nós podemos manter nossa importação para o banco de dados falso. Tudo bem, então vamos passar para a consulta final. Vou copiar este código novamente, e desta vez vamos implementar as nossas postagens. Consulta. Então eu vou colar, uh, são casaco aqui. E isso permitirá que os usuários busquem os detalhes sobre uma publicação de bloco específica. Então, novamente, precisamos mudar um pouco. Vou chamar isso de curry, só postar que vai devolver um objeto postado, e vamos dar uma descrição melhor também. Vamos dizer, obter detalhes sobre um post específico. Lá vamos nós. Agora vamos manter este argumento idéia aqui porque o usuário deve passá-lo junto se ele quer obter informações sobre post específico. No entanto, a idéia de um post não é uma força. É um imager. Então precisamos mudar o tipo aqui, também. Gráfico que você vai. E agora a função de resultado é quase idêntica também. Então continuamos recebendo o objeto dos pais, e continuamos extraindo os alimentos A D dos argumentos. Mas precisamos mudar o método que usamos em nosso banco de dados de fé, então não precisamos obter o autor que precisamos para obter mensagens de bloqueio. Então, como sempre, vamos consertar as importações dela. Não precisamos mais da importação do autor. Agora precisamos importar postagens e não precisamos de gráficos. Você vai amarrar. Mas precisamos do gráfico que Bem, está
tudo bem. Vou salvar o arquivo e pronto. Nós agora implementamos as consultas para R A P I. Na próxima falha, vamos implementar alguns tipos de objetos de entrada, e isso vai formar a base de nossas mutações que vamos fazer em vídeo. Depois que um
14. Entre de objetos: Oi, todo mundo. Neste vídeo, vamos implementar tipos de objetos de entrada. Então, apenas dois vídeos atrás, criamos tipos de objetos regulares, e esses são usados por artesanato. Todos vocês sabem quais campos ele pode expor ao usuário. Bem, os tipos de objeto de
entrada são quase exatamente os mesmos, exceto que eles estão sendo usados para quando os usuários enviam dados para seus tipos de objeto de entrada A. P I ajudam a criar todos vocês para verificar se um usuário deu tudo o necessário e se esses campos estão fora do tipo correto. Então, para resumir, você pode dizer que os tipos de objetos são usados inquéritos para quando as pessoas estão solicitando dados de suas entradas A P I. Tipos de objetos são mutações de Houston onde as pessoas estão enviando dados para o seu A P I. Então vamos implementar para inserir tipos de objetos para o nosso bloco a p I. Eu quero que os autores sejam capazes de criar novas postagens de bloco, e eu quero que os usuários sejam capazes de postar comentários através do nosso gráfico seu L a p I. Então vamos começar com a criação de um tipo de objeto de entrada para a nova publicação de bloco. Vou armazenar esses tipos de objeto de entrada no mesmo arquivo que os tipos regulares. Então eu vou abrir os posts dot Js arquivo dentro do nosso diretório tipos, e eu vou exportar uma nova constante chamada post input type. E este será um novo tipo de objeto de entrada UAL gráfico. E de novo, vamos passar o objeto no seu construtor. Nenhum tipo de objeto de entrada é muito semelhante ao tipo de entrada irregular no sentido de que eles também precisam de um nome, uma descrição e alguns campos. Então vou dar um nome a ele. Vou chamá-lo de post input, e depois vou dar-lhe alguns campos. Agora, que campo incluímos aqui? Bem, eu vou dizer que quando um autor cria uma nova postagem de bloco, precisamos saber o título, o conteúdo e o autor, eu vou dizer que quando um autor cria uma nova postagem de bloco,
precisamos saber o título,
o conteúdo e o autor,
então eu vou chamar esse autor de campo agora. Também precisamos definir o tipo de cada campo novamente. Assim, o título será do tipo String UL gráfico, e o mesmo vale para o conteúdo. E para o autor porque no banco de dados do Fed, nós implementamos o autor I d como uma força. Mas há mais lá, não apenas cordas. Eles são cordas obrigatórias. Eles não podem estar vazios porque uma publicação em bloco sem um título ou sem conteúdo ou sem um autor não deve existir. Então precisamos envolver nossos tipos dentro de um objeto gráfico UL não metálico. Então eu vou ver esse tipo é novo. Gráfico que el non? Não, e eu vou embrulhar gráfico. Você vai amarrar dentro disso. Vou fazer a mesma coisa por estes três campos. Agora, antes de esquecer, vamos também adicionar importações para entrada gráfica em euros, tipo de
objeto e gráfico. Agora você vai saber no topo do nosso arquivo Então gráfico você vai inserir tipo de objeto e criar cura non. Não, lá vamos nós. Então vamos agora passar para o tipo de objeto de entrada para comentários. Eu vou copiar este código aqui, e eu vou abrir o nosso tipo comum e eu vou colar o código lá. Agora, é
claro, vamos mudar o nome desta variável. Vamos dizer comentário, tipo
de entrada, e vamos dar um nome diferente. Comentários, entrada. Vou ligar para isso e precisamos mudar os campos. O Aziz. Bem, então quando você postar um comentário, precisamos saber seu nome, o conteúdo do seu comentário e a idéia do post no qual você deseja deixar seu comentário. Então, vou fazer isso agora mesmo. Vou pedir o conteúdo do seu nome que podemos manter. E, claro, a idéia do post que você quer fazer o seu comentário. Agora vamos verificar se os tipos estão corretos. Nome e conteúdo devem estar fora do gráfico. Você vai força, mas post i d. A idéia de um banco de dados pós-fé é um tipo de imager, então vamos exigir um bem astuto aqui também. Então, mais uma vez, vamos consertar as importações dela. Precisamos importar gráfico ul tipo de objeto de entrada. Precisamos importar embarcações, você saberá,
conhecer e enxertar Cuba ins. E foi isso para este vídeo novamente, criamos os tipos de objetos de entrada que usaremos em nossas mutações agora. Artesanato. Você saberá quais campos os usuários devem dar se ele quiser criar uma nova publicação em bloco ou se deseja criar novos comentários. No entanto, gráfico UL não sabe como deve escrevê-los no banco de dados. Então, no próximo vídeo vamos implementar mutações para que possamos salvar esses dados para trabalhar banco de dados
15. Como criar mutações: Oi, todo mundo. No vídeo anterior, criamos tipos de objetos de entrada e eu disse que esses eram a base para mutações. Bem, neste vídeo, vamos implementar duas mutações para um gráfico. Agora,
se não se lembra do que são mutações,
confira a seção dois dos resultados para refrescar sua memória. Agora, se não se lembra do que são mutações, Assim, as duas mutações são uma para permitir que os autores publiquem novas postagens de bloco em nosso banco de dados e outra para permitir que os usuários postem comentários em posts de bloco. Então vamos começar com os anúncios postar mutações agora, porque mutações são muito parecidas com consultas. Tudo começa copiando o código da nossa consulta post. Então eu vou abrir no poste. Assustador aqui. Vou selecionar todo o código e copiá-lo, e vou colá-lo no arquivo postal JS dentro do nosso diretório de mutações. Agora, mais uma vez, precisamos adaptar isso um pouco. Para começar, vou chamar essa mutação no Post, e essa mutação vai escrever um novo bloco no banco de dados. Mas ele também retornará as mensagens de bloco recém-criadas para que o usuário possa trabalhar com ele se ele quiser. Então eu vou manter o tipo definido para postar aqui. Também vamos dar uma descrição adequada. Iamos dizer que isso cria um novo post bloco e também deve aceitar um argumento . Agora, se o usuário quiser criar um novo bloco gabar-se que ele deve passar ao longo dos dados agora, eu poderia criar um argumento para cada campo para o nosso post, modo que seria um argumento para o título. Outro argumento para conteúdo, outro para os autores. Eu d. No entanto, uma maneira mais eficiente é usar o tipo de objeto de entrada que criamos no último vídeo. Então eu vou apenas criar um argumento e eu vou remover o que temos
agora . E eu vou criar um único argumento chamado Post, e eu vou dizer que post deve ser se tipo de post tipo de entrada. Agora, nós também precisamos de uma função de resultado para dizer gráfico você. Bem, o que ele deve fazer uma vez que ele recebe esses dados de um usuário. Então esta é uma função que novamente ele receberá nossa variável pai, e ele receberá todos os argumentos que foram passados para esta mutação. Então o que vamos fazer aqui é extrair o argumento post para a nossa função de resultado. E a única coisa que precisamos fazer é fazer uma ligação para banco de dados falso e
precisamos adicionar uma nova postagem de bloqueio. E eu já fiz esse método no New Block Post. E, claro, vamos passar o nosso argumento que recebemos aqui. Vamos passar isso para esse método. Agora, nós também devolvemos isso porque no gráfico, você muitas mutações retornam o mesmo objeto que você acabou de criar. Então, no nosso caso, se você executar a mutação no post, ele irá realmente retornar os dados que ele realmente enviou para o banco de dados. E isso pode ser interessante. Por exemplo, se você criar uma nova postagem e você deu o seu autor, eu d você obter essa postagem de volta. Mas então você pode pedir, por
exemplo, o nome do autor, que novamente envolve alguns relacionamentos. Agora, antes de
continuarmos, precisamos consertar nossas importações mais uma vez para que possamos manter o cargo importante aqui. Mas precisamos de uma importação para o nosso tipo de entrada de post. Então, eu só vou dizer que importamos postagens dos tipos postar, e nós também precisamos do tipo de entrada post. Tudo bem, então eu vou salvar o arquivo e vamos agora fazer nossa segunda mutação, e isso é adicionar comentário. Agora, antes que possamos fazer isso, precisamos ter certeza de que nossa obstrução de banco de dados pode lidar com isso. E agora, ele não tem nenhum método que permita que você crie novos comentários. Então vamos criar esse método. Primeiro, vou abrir um banco de dados de figos aqui, e vou rolar até o fundo. E aqui eu tenho alguns métodos certos. E agora, eu só tenho um novo impulso de bloco aqui. Então eu vou adicionar um método chamado adicionar novos comentários e isso vai receber um comentário. Objetos do nosso gráfico você vai resolver função e tudo o que este método deve fazer é dar comentários um válido eu d empurrá-lo para a área bem aqui. A área que contém todos os comentários de conteúdo sobre
e, em seguida, ele deve retornar o comentário recém-criado. Então vamos fazer isso agora. Vamos começar dando um comentário em I d. Então eu poderia dar-lhe uma idéia única aqui, mas eu só vou dizer que este comentário doc não comprimento mais um. Então, se eles são cinco comentários no banco de dados que a idéia do novo comentário será cinco mais um, e que será seis. Depois, vamos empurrá-lo para a área. Vamos dizer isso ou comentamos. Empurre. Vamos empurrar esse comentário para ele, e então vamos voltar a comentar também. Para que o nosso gráfico você fuja. Posso apresentá-lo ao usuário. Tudo bem, então vamos agora implementar mutação. Eu vou abrir o arquivo incomum, e eu vou primeiro copiar tudo de e postagens. Vou acelerar isso. Eles vão mudar o nome. Vou chamá-lo. Adicionar comentário. Isso retornará um objeto de comentário. Também vamos dar uma descrição mais adequada. Vamos dizer cria um novo comentário para uma publicação de bloqueio. Isso receberá um argumento, mas não receberá uma postagem. Ele receberá um comentário. E isso será off comentários, tipo
de entrada, e em um resultado, função. Precisamos pegar nossos argumentos de comentário, este aqui. E então precisamos chamar o banco de dados da figa e precisamos dizer ter novos comentários e então
vamos passar para comentar argumentos bem ali. Então, para terminar, vamos consertar nossas importações. Então precisamos importar comentários que precisamos importar. Precisamos importar comentário, tipo
de entrada, e nós importá-lo de Are comentários Types arquivo, que está localizado em nosso diretório tipos. Tudo bem, digamos que o arquivo e que foi para este vídeo com implementadas as mutações que
permitirão que as pessoas enviem novos dados em um gráfico. Você l A p i. Agora estamos quase prontos para testar seu gráfico seu l a p I. No próximo vídeo, vamos jogar tudo juntos para criar o nosso esquema. E então terminamos. Então vamos continuar com o próximo vídeo.
16. Como criar um esquema: Oi, todo mundo. Nos últimos vídeos, criamos todos os blocos de construção para a nossa implementação gráfica UL. Criamos tipos de objetos, consultas, entrada, tipos de
objetos e mutações. E agora é hora de juntar tudo isso em nosso esquema. Agora, um esquema basicamente diz a você gráfico Bem, como ele poderia expor seus dados aos clientes e como os clientes consentiam novos dados para o plano
A P I. Ele define a forma de todos os dados. Agora o nosso esquema vai viver no no próximo arquivo RGs dentro do nosso esquema de um diretório. Então eu vou derrubar o Fuller está aqui. Vou abrir o próximo arquivo JS. Então vamos começar criando uma constante chamada esquema. E este será um novo esquema UAL gráfico e novamente em seu Construtor. Vamos passar objeto vazio dentro deste objeto, vamos definir duas propriedades uma propriedade para consulta e uma propriedade, quatro mutações. Então vamos dizer crary, que é um novo tipo de objeto ul gráfico novamente, inicializá-lo com um objeto vazio. E também terá imputação, que também é um novo tipo de objeto UAL gráfico. Então vamos implementar a consulta porque Este é um tipo de objeto gráfico Curiel. Ele requer um nome e opcionalmente uma descrição, assim como fizemos com os tipos de objeto para comentário post e autor. Então eu vou dar o nome da consulta. Eu vou dizer que esta é a nossa consulta de rota, e nós também precisamos dar a ele alguns campos que o usuário pode solicitar. E estes são os campos de nível superior. Estes são os campos raiz com os quais o usuário pode trabalhar. Então eu vou adicionar um campo de propriedade aqui, e vamos usar uma função de seta, que retorna um objeto. Isto irá certificar-se de que mantemos o nosso escopo que podemos acessar todas as variáveis e métodos que temos dentro deste arquivo. Agora, no nosso caso, definimos consultas e mutações em outros arquivos, então precisamos importá-los primeiro antes de trabalharmos com eles. Então, vamos importar postagens de nossas publicações da pasta Consultas. Vamos importar nosso post query também de consultas post, Jess. E, em seguida, vamos importar a consulta do autor de consultas barra autor. Enquanto estamos nisso, nós também vamos importar esquema ul gráfico e tipo de objeto ferroviário enxerto. Então importe gráfico que você vai esquema e gráfico que el tipo de objeto a partir do gráfico que você vai empacotar. Lá vamos nós. E agora que importamos nossas consultas, podemos adicioná-las como campos aqui. E para fazer isso, vou usar para espalhar operadores. Eu vou dizer ponto ponto não postagens ponto,
ponto, ponto postagens e ponto, ponto, ponto autor. Agora, o operador de propagação vai tirar o conteúdo de postagens autor e postar. E vai agradar esses conteúdos dentro deste objeto bem aqui. Então, é quase como lá, exceto que nós importamos de um arquivo diferente para tornar nosso projeto mais fácil de manter e mais fácil de entender. Agora podemos fazer a mesma coisa para mutação, então nós vamos importá-los também para dizer, importar em postagens de mutações, barra no post, e nós vamos importar e comentários de pensamento barra, mutação barra e comentários. E agora podemos adicioná-los aqui uma ondulação. Então vamos dar um nome à nossa mutação. Vai ser a mutação das raízes, e ele vai receber alguns campos que novamente é uma função de seta que retorna um objeto. E vamos usar o operador de propagação para adicionar o conteúdo para no post e adicionar comentários. Tudo bem, eu vou salvar o arquivo. E foi isso para este vídeo. Nós pegamos todos os nossos blocos de construção, nossas consultas e nossas mutações, e nós os colocamos dentro de nosso esquema. E agora gráfico. Você bem pode usá-lo esquema para lidar com nossas consultas e nossas mutações. Agora, no próximo vídeo, estamos finalmente prontos para testar o FBI e vê-lo em ação.
17. Como testar nossa API do GraphQL: Oi, todo mundo. No último vídeo, criamos nosso gráfico que você vai esquema. E isso significa que agora temos tudo o que precisamos para começar a usar o nosso MP I Então, neste vídeo, vamos testar se r p i funciona corretamente. Agora eu vou implementar isso no próximo arquivo dentro do nosso diretório fonte. E isso contém alguns Tesco que usamos em uma das seções anteriores. Então eu vou manter a importação muito gráfico vocês todos. Mas eu vou remover o registro do cônsul aqui agora. Além gráfico, você Bem, nós também precisamos importar são esquema porque as necessidades ul gráfico são esquema para saber quais
tipos de objeto temos em nossos olhos ap. Que consulta? Sri permitindo que mutações temos. Então vamos importar esperança que pergaminho para cima. Isso é cruel. Para trás outra vez. Então vamos importar esquema do diretório de esquema e com o guisado carregado, podemos agora começar a escrever um gráfico. Você bem, Crary Então eu vou criar uma constante chamada consulta e eu vou inicializá-la. E aqui eu estou usando um modelo literal porque então eu posso usar quebras de linha sem ter que se preocupar com aspas. No entanto, você também pode usar força regular. É tudo a mesma coisa. Portanto, nossa consulta será muito simples. Vamos supor que eu quero uma lista fora de todos os blocos, postar e de cada bloco gabar-se que eu quero o título. Então, no gráfico, você valoriza objetos criados. Então você diz que eu quero o post, os postes do bloco e o post do bloco fromage. Quero esse título muito simples. Agora que temos a nossa consulta enfraquecida executada contra o nosso esquema, então eu vou chamar gráfico bem, que nós importamos aqui e eu vou dar gráfico. Você vai ser esquema, que também importamos aqui. E então vamos passar nossa consulta agora gráfico UAL funciona de forma síncrona e isso significa que aqui ele retorna uma promessa. Então, temos que esperar pela saída se você quiser trabalhar com ele. Então, para fazer isso promete que você tem que adicioná-lo,
em seguida, método que receberá os resultados de gráfico você Bem, esta será uma função de seta. E aqui podemos trabalhar com os resultados. Então, tudo o que vou fazer é o Cônsul bloquear os resultados para que possamos ver o que está
nele . No entanto, note que os dados de resultado que obtemos de volta da UL gráfica serão todos os objetos JavaScript. E se você quiser ver o que está dentro de um objeto, você precisa encadear uma luta primeiro. Então eu vou chamar Jason dot string de multa em nossos resultados. E eu também quero que o resultado seja um pouco bonito, ele precisa ser formatado. Então eu vou dá-lo a parâmetros adicionais. O 1º 1 que vou começar a conhecer. Isso é porque nós queremos amarrar se eu todos os campos e então nós vamos passar ao longo do número dois. E isso significa que ele vai em dente nosso objeto aqui, um objeto resultado com dois espaços, e que vai torná-lo mais fácil de ler. Tudo bem, mais
uma coisa que precisa fazer aqui. Estamos lidando com a promessa com ela, mas não estamos lidando com nenhum erro. Então vamos adicionar um método de captura aqui. E se houver alguma coisa nós vamos apenas entrar no console para que saibamos sobre qualquer Evers em potencial. Então eu vou salvar o arquivo e eu vou testar ou gráfico você l a p eu vou abrir o terminal aqui e eu vou executar nosso script de construção primeiro. NPM Run Construído novamente. Nós definimos este um dos vídeos anteriores. Isso vai correr balbuciar, e aparentemente temos um pouco de um problema com Veja aqui duplicado declaração gráfico você vai em. Então, parece que importamos o enxerto UAL duas vezes em nosso objeto de comentário. Então vamos dar uma olhada nos comentários e sim, lá vamos nós. Vamos remover isso. Vamos correr viável de novo. Veja mais problemas em nossos dias de código. Eles existem alguns vara olhar agora Comum não está definido em nossos tipos de objeto post. Vamos ver. Sim, estamos usando comum aqui, mas não importamos, então vamos importar isso agora. Importar comentários do nosso comentário. Tipo de objeto. Lá vamos nós. Vamos executá-lo mais uma vez. E agora ele diz esquema deve ser uma instância do esquema Ural gráfico. Então algo está acontecendo com o nosso esquema. Vamos abrir isso. E o problema é que esqueci de exportar nosso esquema. Então estamos encontrando esquema aqui, mas não estamos exportando. Então tudo o que precisamos fazer é dizer, exportar padrões, esquemas, e agora tudo deve ficar bem. Vamos rodar de novo e aí vai você. Nosso gráfico. Sua Aly P. Eu trabalho. Então esta é a resposta que recebemos à nossa consulta. Então vamos esperar a partir da consulta. Então, pedimos todas as postagens em nossas postagens de bloqueio, e pedimos o título de cada uma dessas postagens de bloco. E assim nós obtemos posts de volta, que é uma área, e ele contém um objeto por post em nosso banco de dados com o título fora do Post. Então vamos terminar testando uma consulta mais avançada que também usa relacionamentos. Digamos que eu quero uma lista de todos os posts de bloco com o nome do autor que os escreveu. Então queremos o título. Eu vou dizer que nós também queremos o autor e nós queremos o nome do autor. Então vamos salvar o arquivo. Vamos executar ou construir script novamente. E com certeza, agora temos uma lista de Bloquear post com seu título com um campo de autor e com o nome fora do autor. Então foi isso para este vídeo e pagar esta seção são gráficos você l um p I implementação está agora completa e ele realmente funciona. Na próxima seção. Vou mostrar-lhe como você pode configurar gráfico para que você contestar o seu A p i com uma arma ou rosto muito agradável e até mesmo obter recursos como auto completo como o seu tipo em sua consulta.
18. Introdução ao GraphiQL: Oi, todos nesta seção, vamos testar o nosso A p I com gráfico. Neste vídeo, vou explicar o que ISS gráfico e por que pode ser uma ótima idéia usá-lo. Depois disso, vou mostrar-lhe como instalar e configurar gráficos para apenas P I. E finalmente vou mostrar-lhe como usar o próprio gráfico. Então vamos começar explicando o que é gráfico. Eu usei o banco em vídeos anteriores para explicar os conceitos principais fora do gráfico Você fora agora para testar o seu p I. Você precisa fazer pedidos para um servidor Web. Você pode fazer isso escrevendo alguns scripts pequenos, ou você pode usar APS que são especificamente projetados para ele em caso de repouso. Olhos AP Existem muitas ferramentas para fazer isso. Estou pensando em ferramentas como o Postmen Paw, o cliente de descanso do Jet Brain, IDs e assim por diante. Gráfico é exatamente como essas ferramentas, exceto que ele funciona com o gráfico u l e p i em vez de um descanso um p i. Mas ele não pára por aí. Gráfica é muito mais inteligente do que qualquer outra ferramenta AP I. Ele se integra com seu gráfico U L f b I, e ele pergunta sobre todas as consultas suportadas, mutações e tipos. Agora, com essa informação, gráfico é capaz de oferecer-lhe sintaxe, destacando erro inteligente, auto completando em tempo real, destacando uma conclusão automática de consulta. Na verdade, gráfico está sendo descrito como uma idee para gráfico. Você bem, e o melhor de tudo, ele é executado completamente em seu navegador. Então vamos mergulhar. No próximo vídeo, vamos adicionar gráfico como uma dependência e escrever um pequeno pedaço de código para torná-lo realmente executado .
19. Instale e configure o GraphiQL: Ei, todo mundo. Neste vídeo, vamos instalar e configurar gráficos para que você possa começar a usá-lo. Agora vamos usar o NPM para instalar o gráfico como uma dependência para o nosso projeto. Agora, antes que possamos usar gráfico, no entanto, precisamos ter certeza de que o nosso A p I é acessível dentro de chamada http. Então nós precisamos executar nosso servidor Web para isso Agora, sem mundo G s, muitas pessoas usam express. É uma estrutura de replicação simples, e há até mesmo um pacote de notas que conjuntos de gráficos para reunir com o express. Então vamos instalar isso em nosso projeto. Eu vou abrir um terminal e eu estou indo para executar NPM instalar
Dash, traço seguro para telegrafar que bem, que ele deve salvar esta dependência interno arquivo Jason empacotado. E então eu vou dizer que ele deve instalar, expressar e expressar gráfico você bem, e este último irá fornecer a integração entre UAL gráfico e express para que nós não tenhamos que escrever isso nós mesmos. Então vamos fazer isso agora. Agora, com aqueles instalados, precisamos de um pequeno pedaço de script Java que inicia um servidor express e vincula gráficos a ele para que eu vou criar um novo arquivo dentro do nosso diretório de código-fonte, e eu vou chamar isso Surf Dot Jazz. Vou fechar o terminal, e vou começar importando. Nossas dependências começarão importando express do pacote expresso. E também vamos importar gráfico ul http do gráfico expresso você bem, biblioteca. E, novamente, este é um pacote especial que torna gráfico, ul e gráfico compatível com express. Agora, finalmente, porque queremos executar consultas que precisamos importar são esquema para que o mal gráfico saiba quais dados temos e como podemos acessá-lo. Então eu vou importar o esquema deste diretório agora, com isso feito, podemos criar um novo servidor Web. E então eu vou criar uma nova constante chamada aplicativo, e eu vou inicializar um novo objeto expresso aqui. Então, neste ponto, nós temos um servidor web, mas ele não tem nenhum ponto final ainda, então eu vou adicioná-lo dizendo após o uso e isso requer dois parâmetros. O 1º 1 é o ponto final que você deseja expor. E o 2º 1 é uma função que irá responder a um pedido, então eu vou expor o gráfico barra você bem e apontar. E agora precisamos especificar qual função irá lidar com o nosso pedido. E vamos usar gráfico você al h para ser do pacote que acabamos de importar aqui. Então eu vou chamar gráfico ul http e dentro de seu construtor, eu vou passar um objeto vazio, e aqui nós podemos passar ao longo das opções para gráfico. Está fora, Http? Então, primeira parada, vamos passar ou esquema para ele. Para que ele saiba quais consultas apoiamos e como ele deve falar com nosso banco de dados. E então vamos habilitar gráfico, mas apenas definindo a propriedade gráfica como true. Tudo bem, estamos quase terminando. Agora, a última coisa que precisamos fazer é começar nosso servidor web dizendo que nossa ação escuta em uma porta específica. Então eu vou dizer no console,
iniciando o servidor para que tenhamos um pouco de feedback e que eu vou dizer, app dot Ouça, e eu vou fazer nosso infeliz e no porto para 1000 agora, lembre-se, se quisermos executar o script, precisamos executar o babble primeiro, e então precisamos executar nosso script. Então vamos automatizar isso criando um novo script em nosso pacote de arquivo Jason. Então eu vou abrir o pacote do arquivo Jason aqui, e eu vou criar um novo script aqui, e eu vou chamar o script de servir. E a primeira coisa que deve fazer é construir nosso projeto. Então eu vou dizer fonte de balbuciar. E, em seguida, o diretório de saída é este e o segundo comando que ele deve executar é ele deve executar. São servidos no arquivo Js com No Jess. Então eu vou fazer esse nó. Isso serviu jazz de pensamento. Tudo bem, então vamos salvar o arquivo e experimentá-lo. Eu vou abrir o terminal e eu vou rodar NPM Run surf. E como você pode ver, este script agora executa babble para transpire são código de script Java, como você pode ver aqui e, em seguida, ele também executa seu servidor web. Esta é a mensagem do nosso servido que arquivo Js e você também pode ver que ele mantém meu prompt
eterno ocupado porque o servidor Web está realmente em execução então agora eu não posso digitar um novo comando no meu terminal porque o servidor Web ainda está em execução ou nenhum jazz aguardando solicitações de entrada. Então, foi isso para este vídeo ou servidor Web está funcionando. Ele está pronto para receber solicitações,
Então, no próximo vídeo, vamos usar gráfico.
20. Como usar o GraphiQL: Oi, todo mundo. Neste vídeo vamos dar uma olhada em como você pode usar o gráfico e você vai ver por que ele é uma ferramenta
tão grande. É outra vantagem de gráfico você L um p s metade sobre o tradicional ap gelo. Então, apenas para recapitular o último vídeo, você tem que executar o nosso script de servir para iniciar o aplicativo Web expresso que irá hospedar gráfico . Então eu vou abrir o terminal e dentro do nosso projeto bem aqui. Eu só vou correr NPM run, senhor. E novamente, isso vai iniciar nosso servidor expresso e agora vamos abrir o cromo e vamos para os hosts locais 4000. Essa é a porta que configuramos express para executar em barra gráfico você bem e agora somos recebidos por gráfico. Agora sua interface é bem simples. No lado esquerdo, você pode ver a consulta e a imitação que você está executando agora. Uma vez que eles são executados, você sempre mostrá-los no lado direito da tela. Agora, no topo, você também tem algumas ferramentas que você tem botão play que executa o seu código um botão bonito cinco para formatar corretamente e inventar suas consultas aqui. E você tem um botão de histórico, que se abre em nosso painel mostrando as consultas feitas recentemente. Então vamos escrever uma consulta simples que obtém uma lista de posts de bloqueio com o título para cada um. Agora vamos também supor que eu sou um novo usuário que não usou seu FBI antes e que
não há documentação agora usando preso eu, sem documentação adequada pode ser um pesadelo. Mas como vai ser com gráfico? - Você? Bem, vamos começar dizendo que eu quero escrever uma consulta. Eu vou abrir as chaves e como um novo usuário, eu não sei que campos de rota este ap eu suporta. Então eu só vou trazer o auto, completo por espaço de controle oculto. Agora, este é o mesmo atalho que muitos I d Ys usam também. Então aqui temos uma lista de campos de rota suportados e temos até uma boa descrição. Então aqui vemos posts e a descrição é obter uma lista de post bloco recente. Agora, lembre-se, nós definimos esta descrição no esquema agora ele pode ter parecido um pouco criado para
defini-los no esquema, mas aqui eles realmente se concretizam. Então vamos pegar uma lista de postagens de bloqueio que eu vou tocar, Enter, e eu vou abrir as chaves novamente. E assim como antes, agora
posso pedir gráficos para os campos que posso solicitar. E com certeza, há todos os campos que podemos solicitar. Então eu posso escolher título, por exemplo, e pressionar Tab, e ele vai se sentir intitulado em nossa consulta. Então vamos agora testar esta consulta e vamos executar clicando no jogo. Mas, como podem ver, temos uma lista de postes de bloqueio no lado direito. Bastante simples. Agora posso continuar a mudar a minha consulta. Vamos ver o que gráfico faz quando eu não dou uma consulta completa. Digamos que eu também quero o nome do autor, mas que eu apenas peço o campo de autor aqui. Vamos supor que eu não sei que eu tenho que sub selecionar nome muitas vezes autor. Agora isso não deve funcionar porque temos que especificar quais campos de autor queremos. Mas vamos executá-lo de qualquer maneira. Então, quando eu clicar em jogar e como você pode ver, gráfico pegou nele e adicionou os campos I D automaticamente antes de executar a nossa consulta. Então ele lida são erros ao tentar corrigi-los de antemão, e neste caso, ele funciona muito bem. Agora vamos torná-lo um pouco mais difícil em vez de título, vamos fazer um erro de digitação em Vamos pedir um título como este agora. Como você pode ver, graphic novel não pega. Esse erro não solicita isso. Não é nos avisar que esta é uma consulta inválida, mas se eu executar isso, você verá que Graphic UL faz. E diz que não podemos pedir um título de campo porque isso não está disponível em nosso
tipo de postagem . E também tenta ser útil. E diz: “ Você quis dizer título? E, claro, nós também fizemos muito útil. Agora, finalmente, quero mostrar a vocês o painel de documentação. Então, se você clicar nas docas aqui no canto direito, um painel será aberto com a documentação que o gráfico UAL extraiu do nosso esquema. Então eu posso ver o que coros ar possível, por exemplo, Então vamos abrir a consulta raiz aqui para ver o que campos Reed podem solicitar. E com certeza, aqui estão três campos de rota. Posso pedir postagens para um único post ou para detalhes sobre um autor, e ele até mostra que tipo de dados ele retorna. Então post retorna uma área de objetos post e nossos campos de post, exceto um argumento I d, que deve ser do tipo imager. E não precisávamos fazer nada por isso de novo. Ele extraiu isso das descrições em seu esquema e de ou tempos de retorno. Agora posso continuar a clicar nos campos aqui dentro. Então, se eu quiser saber o que um objeto post parece, Eu basta clicar nele e, em seguida, eu posso ver que Oposta tem todos os detalhes de um bloco mensagens, e eu posso ver os campos que ele tem. Então foi isso para este vídeo. Espero que perceba o quão poderoso o mal gráfico é. A próxima seção será encerrado. Este curso vai falar sobre a conclusão, e eu vou dar-lhe algum recurso interessante é para continuar sua busca gráfica
21. Conclusões: Ei, pessoal, muito
obrigado por comprarem as notas e assistirem até o fim. Espero que gostem destes vídeos e que tenham aprendido muito com ele. O UAL gráfico é uma ferramenta incrível. E apesar de ainda ser muito jovem, já
está sendo implantado em grandes empresas como o Facebook. Levante-se grito e muitos mais. E agora você sabe como você pode construir seu próprio gráfico. Você l e p I. Agora, se você tiver alguma dúvida ou sugestão para cursos futuros, definitivamente me avise. Agradeço muito qualquer feedback que possa ter. Eu também publiquei o código-fonte que foi usado durante este curso você concorda emitido como um arquivo zip e usá-lo como um modelo para começar a construir seu próprio gráfico. Você, Aly p. Eu também me certifico de conferir meu canal no YouTube para mais tutoriais ou para conferir meu site. Foi isso. Obrigado novamente por assistir os resultados e espero vê-lo no meu próximo curso