introdução ao GraphQL com Prisma (v1)

1. Introdução e como cobre este curso: Bem-vindo a este curso. Estou animado para ensinar a vocês uma das tecnologias de desenvolvimento web mais procuradas no momento, que é o GraphQL. GraphQL é uma forma moderna de criar APIs para criar o back-end de nossos projetos. Ele basicamente fornece uma sintaxe simples de usar para obter os dados exatos que queremos para o nosso front-end. Temos, digamos, um site ou um dispositivo móvel ou qualquer outro serviço. Este curso introdutório abrange todos os fundamentos para você começar, como configurar nossos servidores GraphQL, trabalhar com consultas, mutações e assinaturas, como os tipos funcionam e as relações entre eles. Resolvedores escritos, e como configurar um banco de dados real e também interativamente usando PRISMA, juntamente com muito mais que você encontrará enquanto percorremos o curso. Ao final deste curso, você saberá o que é tudo isso e como podemos aplicá-los a todos os projetos. Nós não vamos estar apenas cobrindo teoria chata neste curso. Na verdade, praticamente todos os exemplos que abordaremos, vamos transformá-lo em um projeto de curso. Este será um projeto baseado em revisão de filme onde os usuários podem criar uma revisão, com base nos filmes no banco de dados. Você aprenderá a interagir com o servidor e também com o banco de dados, postar dados como novos usuários, filmes e avaliações, além de como obter de volta os dados exatos que queremos, como listar avaliações para usuários específicos. Como podemos vincular dados relacionais, como avaliações a filmes, e também ao usuário que os criou. Este curso é destinado a iniciantes no GraphQL e também PRISMA e também até mesmo recém-chegados a trabalhar no lado do servidor. No entanto, eu recomendaria pelo menos alguma experiência básica de JavaScript ou uma linguagem similar. Isso realmente ajudará você a passar por este curso. Além disso, ter uma compreensão básica da função de um servidor e um banco de dados também ajudará você a obter o máximo à medida que você progride no curso, então esperamos que você esteja pronto para levar suas habilidades ao próximo nível aprendendo GraphQL e PRISMA. 2. O que é GraphQL?: Antes de começarmos a construir um servidor GraphQL real. Eu quero tirar um momento para rever exatamente o que GraphQL é e por que está se tornando tão popular. GraphQL foi originalmente criado no Facebook e agora é um projeto de código aberto. Não é uma linguagem de programação, uma estrutura ou algo assim. É um padrão para construir A-P-Is moderno ou geralmente enviar dados de um servidor para o cliente. No mundo do desenvolvimento web, ele pode permitir que dados sejam enviados entre um cliente e um servidor. Um cliente do lado esquerdo deste slide. Que pode ser qualquer coisa do navegador de um computador, smartphone, ou qualquer outra coisa que precise obter dados. Esta comunicação é via solicitações H-T-T-P e o servidor à direita. Que envia os dados solicitados de volta para esses clientes. Isso geralmente consiste em um servidor Web para lidar com solicitações dos clientes e também um banco de dados do qual o servidor pode obter dados se necessário antes de retornar isso de volta ao cliente. Uma forma popular de permitir que o cliente e o servidor se comuniquem é chamado de REST A-P-I. Um A-P-I é um conjunto de regras para permitir a comunicação entre diferentes partes de software. No nosso caso, o cliente e o servidor. Pequenas empresas maiores frequentemente disponibilizam dados publicamente através de um A-P-I. Por exemplo, o Spotify tem um A-P-I para que possamos acessá-los catálogo de músicas. Ou seja, qualquer pessoa pode criar seu próprio leitor de música pessoal e, em seguida, usar os dados do Spotify para obter músicas, listas de reprodução, informações sobre artistas e muito mais. O Google também tem muitos A-P-I também. Por exemplo: permitir que os aplicativos acessem dados do Google Maps ou você pode criar seus próprios sites de reprodutor de vídeo e, em seguida, usar vídeos do YouTube nos bastidores. A-P-tradicional é muitas vezes referido como REST A-P-Is. No entanto, têm algumas limitações com estes A-P-Is. Eles geralmente têm vários Endpoints para obter dados. Por exemplo, este é o ponto final base do Spotify na parte superior, que é um U-R-L. Em seguida, abaixo disso, nós estendemos este U-R-L para obter mais dados, como um álbum pelo album/id. Em seguida, na parte inferior nós também podemos adicionar faixas de barra para este U-R-L para obter todas as faixas para este álbum em particular. Baseado no nosso projeto que será construído neste curso. Digamos que queríamos obter críticas de filmes para um usuário. Usando um REST A-P-I, talvez seja necessário fazer várias solicitações para diferentes pontos finais para obter todos os dados que precisamos, como o endpoint de usuários, o endpoint de revisões e também o endpoint de filme. Dependendo de como o A-P-I foi estruturado. Isso pode resultar em obter muito mais informações de volta do que precisávamos. Se precisássemos do título do filme. Podemos ainda precisar recuperar todos os outros dados do filme também, como ID, descrição, informações do cliente e assim por diante. Além de fazer várias solicitações, que podem ser demoradas. Embora não haja nada fundamentalmente errado com essa abordagem, GraphQL nos fornece uma alternativa melhor. GraphQL tem apenas um endpoint, no mínimo uma consulta para nossos dados e tem a flexibilidade de nos devolver apenas os dados exatos que precisamos. Por exemplo, um dispositivo móvel pode não precisar recuperar os mesmos dados de um site de desktop devido ao tamanho reduzido da tela. Um pequeno dispositivo pode querer apenas as revisões informações básicas, como o nome do autor e o título do filme. Considerando que o aplicativo de desktop também pode querer mais informações, como a classificação do filme e a descrição. Isso pode ser facilmente alcançado usando GraphQL, enquanto REST A-P-Is pode ter dificuldade para oferecer a mesma flexibilidade devido ao uso desses endpoints rígidos. Terei muita prática em descrever os dados que queremos obter de volta durante este curso. Isso torna o GraphQL uma maneira realmente flexível, rápida e eficiente de colocar dados em nossos projetos. 3. O que vamos criar: À medida que avançamos neste curso, criaremos um projeto baseado em revisão de filmes. A ideia é que podemos criar usuários, criar filmes e, em seguida, cada usuário pode criar uma revisão baseada no filme em particular. Uma vez que estamos usando GraphQL que é uma linguagem de consulta para criar o back-end de sites, nós não vamos ter uma interface de usuário para lidar com este projeto, mas em vez disso vamos usar o que você pode ver aqui, e isso é chamado de playground GraphQL, que nos permite interagir com todos os nossos dados, seja eles armazenados em nosso projeto ou armazenados em um banco de dados que vamos adicionar. Se tudo isso parece um pouco confuso e desconhecido, o que você disse? Sim, já que temos muita prática usando um playground GraphQL como vamos. À medida que avançamos, vamos criar todo o código que precisamos para nosso servidor e armazenar dados em nosso banco de dados. Vamos fazer coisas como realizar consultas onde obtemos dados como filmes. Aqui está uma lista de todos os filmes em nosso banco de dados. Vamos fazer o mesmo para os usuários. Vamos escrever todo o código para nos permitir capturar usuários, e quaisquer dados associados, como o usuário está vinculado aos comentários e também comentários vinculados a um usuário e também a um filme também. Isso nos dará muito para ir praticar arte, arte nas relações entre nossos diferentes tipos. Nós também podemos fazer coisas como pegar avaliações por usuário e GraphQL é realmente flexível, permitindo-nos retirar apenas os dados exatos que queremos. Todos esses dados voltam do nosso banco de dados, estruturados como um objeto. É fácil enviar para qualquer front-end seja um site ou um dispositivo móvel. Todos esses dados serão armazenados dentro de um banco de dados real onde definimos o prismático interagir com nosso banco de dados. Isso nos dá uma representação visual muito melhor. Podemos ver nossos usuários, nossos filmes e quaisquer comentários que estão sendo adicionados. Também podemos ver qualquer relacionamento. Se olharmos para o filme, podemos ver as críticas e quantas para cada um. O mesmo para os usuários. Podemos ver quantos comentários foram postados para cada um, os contatos, e então podemos também ser levados para essa revisão. Voltar no playground, bem como ler dados do banco de dados, também vai olhar para como podemos cadastrar usuários, também vai olhar para como podemos criar eMovies, e também olhar para como podemos criar comentários que estão vinculados para o filme e para o usuário. Outro ótimo recurso do ao usar o GraphQL é que também podemos usar o que é chamado de assinatura. E isso nos permitirá assinar os dados. Toda vez que os dados são alterados no servidor, ele automaticamente os envia para o nosso front-end para que sejamos notificados de quaisquer alterações. Isso é ideal para algo como uma revisão. Cada vez que uma nova revisão está sendo criada, vamos criar uma revisão aqui. Em seguida, vemos esses dados empurrados para o nosso front-end. Podemos manter-nos a par das coisas à medida que elas mudam. Novamente, não se preocupe muito com o que vê aqui. Isso só nos permitirá interagir com os dados que vamos criar durante este curso. Não vamos perder tempo a lidar com o nosso novo projecto. Vou começar isso no próximo vídeo. 4. Como configurar nosso projeto e GraphQL-Yoga: Durante este curso, criaremos um servidor GraphQL base de revisão de filmes, que já analisamos. Para começar, precisamos criar uma pasta para projetos e eu quero colocar o meu na área de trabalho para facilitar o acesso. Vou chamar este filme de revisão de hífen. Em seguida, abra-o no Visual Studio Code, que estou usando como editor de texto para o curso. Vamos abrir isso e, em seguida, arraste sobre a pasta do projeto para o código VS. É claro que você pode usar qualquer editor de texto que você preferir. Antes de fazermos qualquer outra coisa, você precisará se certificar de que você tem Node instalado no seu computador. Para fazer isso, abra o navegador e, em seguida, precisamos ir para NodeJs.org. Clique no download para obter a versão mais recente. Uma vez instalado, então executamos a instalação assim como qualquer um de um download. Vou clicar nisto. Continuar através. Devo concordar com o licenciamento, e depois instalá-lo no meu disco rígido. Deve levar apenas alguns momentos para instalar também. Uma vez que isso é feito, limpe isso o e maneira, em seguida, podemos voltar para o Visual Studio Code. Vou abrir um terminal, vou para o terminal e depois novo terminal. Na parte inferior, você vê que o terminal foi aberto agora e podemos executar alguns comandos. O primeiro é verificar novamente o nó e o NPM foi instalado com êxito. Fazemos isso verificando o node-V e isso nos dará a versão do nó do buck, que instalou. Se você vir um erro em vez de um número de versão, houve um problema ao instalar o Node e você precisa voltar e fazer isso primeiro. Nós também poderia verificar novamente com Node Package Manager com NPM B. Eles também devem nos dar a versão do NPM terá instalado e ele vem empacotado com o download do nó. Ótima. Dentro do terminal podemos executar NPM nele. Aperte Enter e isso inicializará nossos projetos. Vou apenas inserir opções completas, mantendo a maioria dos locais como padrão. O nome do pacote, eu insiro, a descrição da versão. O que muda para fazer é ao invés de ter os pontos de entrada como o index.js, eu quero alterações para o código-fonte, então src/idex.js, digite e digite através de todo o resto das opções. Se abrirmos a barra lateral, podemos ver dentro da nossa pasta agora temos um arquivo.json package.json. Isto contém todas as informações sobre o nosso projeto que é inserido. Este é um arquivo Node bastante padrão e nada específico para GraphQL neste momento. Em seguida, criaremos nosso arquivo index.js, que é adicionado como os pontos de entrada. Volte para a barra lateral em nosso editor aberto e crie uma nova pasta na raiz do nosso projeto, que é a fonte, então src. Dentro daqui podemos criar nossa página de índice, que é index.js. Como o GraphQL é uma especificação em vez de uma linguagem de programação real, uma biblioteca ou qualquer outra coisa, precisamos esperar para realmente usar o GraphQL em projetos do mundo real. GraphQL como uma especificação não é específico para qualquer linguagem de programação. Portanto, precisamos usar um pacote ou uma implementação para nó, que será usado para este curso. O que estou usando é chamado GraphQL Yoga. Claro que existem outras alternativas, mas esta é uma que eu vou usar para este curso, já que ele tem muitos recursos e é fácil de começar e funcionar com. Vá até o navegador e abra o cromo. Em seguida, em uma nova guia, eu vou procurar por GraphQL yoga. Podemos ver que é um link GitHub aqui para GraphQL yoga, que nos leva para a documentação. Outras implementações também estão disponíveis para, para que possamos usar GraphQL, em outras linguagens ou ambientes como Python. GraphQL yoga é um servidor GraphQL fácil de usar e configurar, que nos permitirá tirar proveito de todos os o que nos permitirá tirar proveito de todos osrecursos do GraphQL que precisarão, tais como consultas , mutações e assinaturas para citar alguns. Mais em nosso projeto até o terminal, podemos usar o NPM para instalar este pacote. NPM, que é para instalar graphql-yoga. Uma vez instalado, podemos usar nosso arquivo index.js. Nós já começamos a criar. Faça o nosso servidor GraphQL. Vamos começar neste arquivo index.js exigindo o servidor GraphQL. Então const GraphQL Server, Eu sou cuidadoso com o invólucro aqui, isso é igual a exigir, Eu vou exigir o nosso pacote de yoga GraphQL, graphql-yoga. Em seguida, precisamos criar uma nova instância deste servidor GraphQL. Vou chamar isso de um nome constante do servidor e definir isso igual a uma nova instância do GraphQL Server. Este servidor GraphQL leva em um objeto e, em seguida, aqui passaria em duas propriedades. Essas propriedades são chamadas TypeDefs e resolvedores. O primeiro TypeDefs e, em seguida, resolve. Podemos então este servidor que criamos e, em seguida, ele chamar o método de início. O método start, em seguida, leva em um retorno de chamada, que é uma função que irá executar um este antes do início da pesquisa. registro simples do console será bom por enquanto. Vamos transformar isso em uma função, que retorna um log de console. Este log de console só vai enviar uma mensagem de servidor está sendo executado no localhost, pausa 4000, e lá vamos nós. Este é o nosso gráfico básico SQL Server agora em vigor. Em seguida, incluiremos alguns dados de amostra para trabalhar, antes de retornar, dê uma olhada nos TypeDefs e resolvedores que você passa para o nosso servidor. 5. Como incluir dados de amostra para trabalhar: Incluído neste curso está um download que inclui alguns dados de amostra, ter este download sentado aqui como um arquivo de texto na área de trabalho. Quando começamos com o gráfico QL, podemos precisar de alguns dados temporários para começar. Até que tenhamos a configuração do nosso banco de dados mais tarde usando PRISMA. Então vá em frente e baixe o arquivo de dados de amostra ou, se preferir, você pode digitá-lo. Precisamos criar um novo arquivo em nosso projeto para copiar esses dados de amostra. Então eu vou abrir a barra lateral, e dentro da pasta de origem, eu vou criar um novo arquivo chamado sampledata.js. Abra o arquivo de texto de dados de amostra, selecione todos, copie ou menos e cole isso em nossos dados de amostra. Esta é apenas algumas informações para começar com gráfico QL, temos uma matriz de usuários, temos uma matriz de filmes, e também temos uma série de comentários, módulo exporta todos estes que podemos usá-los em nosso projeto. Podemos então exigir os dados de amostra em nosso arquivo index.js, robin usa filmes e opiniões matriz, Eu quero fazer isso na parte superior e defini-los como uma constante. Podemos importar todos os filmes da mesma linha. Então usa, filmes e comentários, e então podemos exigir nosso arquivo de dados de exemplo dentro aqui, uma vez que este não é um módulo de nó, você precisa adicionar o caminho de arquivo completo? No nosso caso, ele está no mesmo local, então ponto barra e, em seguida, amostra de dados. Não há necessidade da extensão JS. Agora precisamos de uma maneira de tornar esses dados personalizados disponíveis para o resto do nosso servidor, e gráfico QL yoga fornece o objeto de contexto para nos permitir fazer isso. Ao lado do nosso servidor. Eu vou adicionar essas duas novas linhas tornar mais legível, nós temos os TypeDefs, os resolvers, e em seguida, depois aqui eu vou adicionar uma vírgula e também passar no contexto. Nós configuramos isso como um objeto para que possamos passar em vários itens. Nós vamos adicionar nos filmes do usuário e também comentários, e esses três são os mesmos nomes que você passa no topo aqui como nossas constantes. Então, o confronto dentro do contexto, se isso não fizer sentido no momento, não se preocupe, isso ficará mais claro o que isso fará nos próximos vídeos. Então, por enquanto, considere isso como um trabalho de configuração, e começaremos a trabalhar com esses dados no próximo vídeo. 6. Primeira olhar para TypeDefs e resolve: Até agora criamos nosso GraphQL Server, passando os TypeDefs e também os resolvedores. Ainda não olhamos para o que são, mas ambas são peças muito importantes no quebra-cabeça do GraphQL. Isto é o que vamos ver neste vídeo. Começando com TypeDefs, que é abreviação para definições de tipo. Este é o nosso esquema GraphQL, que basicamente nos permite estruturar nossos dados usando tipos como uma string de texto, ou um valor booleano de true e false. Como o GraphQL pode ser usado em qualquer linguagem de programação, nós escrevemos serviços GraphQL usando uma sintaxe especial chamada linguagem de esquema GraphQL, que é muito fácil de começar. Teremos muita prática durante este curso. Nós então temos os resolvers, que é onde nós pedimos nossas funções, que irá realmente executar a operação que queremos com base em nosso esquema. Cada campo em nosso esquema é espelhado por uma função com o mesmo nome nos resolvers. Vamos ver alguns exemplos de como isso funciona em ação. Um agora mesmo arquivo index.qs logo acima do nosso servidor. Vou começar criando nossos TypeDefs. Então const TypeDefs, e isso vai ser igual a uma string que usamos com os ticks traseiros. Então abra isso. Uma vez adicioná-los em uma nova linha logo abaixo desta configuração de um const de resolvedores. Serviço igual a um objeto vazio por enquanto. Vamos começar olhando para os TypeDefs, ou as definições de tipo. Ao usar o GraphQL, vamos falar muito sobre tipos. São esses tipos que descrevem nossos dados. Para começar, temos três tipos de raiz, Consulta, Mutação e Assinatura. Esses tipos de grupos cobriram as operações que queremos executar. Vamos adicionar isso agora. Então, o primeiro tipo, que vai ser Query, Q maiúsculas, e definir isso como um objeto. O segundo tipo raiz será para Mutações, então digite Mutation, maiúsculo M. O terceiro será Assinatura, digite Assinatura. Novamente, defina isso como um objeto. Uma consulta é usada para consultar o nosso servidor e obter de volta os dados que queremos. Uma mutação enviará novos dados para o servidor. Finalmente, temos uma assinatura que nos dá a funcionalidade em tempo real, permitindo que os servidores enviem dados para o cliente uma vez que eles mudam. Mas vamos nos concentrar em consultas para este tempo. Portanto, podemos simplesmente excluir a Mutação e a Assinatura por enquanto, e retornaremos a elas conforme precisarmos delas durante o curso. Consulta é criado primeiro dando-lhe um nome, seguido por um tipo, que esperamos obter de volta. Um exemplo básico seria algo parecido com isso. Teria um nome de consulta do filme, e esperamos obter de volta uma string. Podemos adicionar ponto de exclamação no final, que é opcional. Isto é para declarar que sempre queremos uma tela de volta e nunca pode ser o valor de null. Ele pode estar vazio se nenhum dado for encontrado, mas o valor retornado não pode conter um valor nulo. A segunda parte é configurar um resolvedor para este filme Query. Lembre-se que dissemos que cada consulta deve ter um resolvedor com um nome correspondente. Este resolvedor é responsável por realmente executar a operação que queremos, no nosso caso, para obter o nome de um filme. Assim como os TypeDefs, os resolvers levam em um objeto correspondente Query, Mutation e Subscription para agrupá-los juntos, mas agora embora nós só precisamos da consulta. Então, dentro do objeto resolvers, podemos configurar nossas consultas com um Q. maiúsculo aqui, podemos listar todas as nossas consultas e teremos apenas uma por enquanto. Então, podemos resolver Query resolver método com um nome correspondente de filme. O filme vai ser uma função que simplesmente vai retornar uma string. Então retornar valor, podemos adicionar qualquer nome que quisermos. Então, o filme de Lego está bem. Isso vai retornar uma string, uma vez que isso é o que precisamos para a nossa consulta logo acima. Se você está um pouco confuso agora, isso é perfeitamente normal. Eu também estava, quando aprendeu tudo isso pela primeira vez, já que é um pouco diferente do que usamos antes. Muito do que fazemos para o resto do curso seguirá exatamente esse mesmo padrão, então você terá muita prática. Agora podemos iniciar o servidor no terminal e verificar se isso está funcionando. Até a parte inferior, dentro do terminal, você pode digitar o nó e, em seguida, fonte, ou /index.js. Lembre-se, este é o ponto de entrada que definimos anteriormente. Aperte “Enter”. Agora vemos a mensagem do servidor está sendo executado no localhost 4000, que é a mensagem que recebemos de volta do nosso log do console. Vamos abrir o Chrome, digite localhost 4000. Isso abrirá o playground Graph QL para nós. Lembre-se, o GraphQL é um servidor ou back-end para nossos sites e aplicativos. Este playground GraphQL nos permitirá interagir com nossos dados de serviço durante o desenvolvimento. Vamos dar uma volta à esquerda. Uma vez que esta é uma consulta que configuramos, podemos digitar em Consulta seguido pelas chaves. Só temos uma consulta até agora, que é filmes. Por isso, podemos agora incluir isto. Você pode ver que o playground tem um realmente bom também completa, e ele vai tentar sugerir os nomes de nossas consultas e os campos como vamos. Agora, se formos em frente e apertarmos o botão play no meio do lado direito, podemos ver os dados do filme foram retornados. Temos o nome Query do filme que definimos, e também a cadeia de texto, que dissemos no resolvedor. Agora vou adicionar outra consulta para obter um pouco mais de prática. Esta consulta será um usuário retornando um tipo de string mais uma vez, e o resolvedor retornará qualquer nome de usuário que você escolher. Então, começando com os TypeDefs acima, você começa o filme. Podemos adicionar em nossos dois pontos de usuário. Isto irá retornar uma string, novamente, usando o ponto de exclamação, que significa que não queremos um valor de null retornado do servidor. Depois disso, configuramos nosso resolvedor abaixo. Logo após o filme, podemos adicionar uma vírgula, configurar nosso método de usuário e, em seguida, retornar um valor de string. Eu deveria adicionar meu nome aqui dentro, nos dar um cofre para o Chrome. Agora, se recarregarmos, e em vez de filme precisamos de usuário. Você pode ver se digitamos nos EUA, que o auto completo não está funcionando. Isso ocorre porque quando fazemos qualquer alteração no momento, precisamos reiniciar nosso servidor. Então, de volta ao seu terminal, na parte inferior, controle e C irá fechar o servidor. Então, novamente, podemos executar nó, fonte ou /index.js. Isso reiniciará nosso servidor novamente. Recarregue os playgrounds. Agora podemos ver o tipo de usuário também está completo em um jogo e obtemos o nome de usuário retornado. Este é um primeiro olhar básico sobre o uso de consultas no GraphQL. Em seguida, vamos olhar para o uso de alguns tipos diferentes sobre a nova string, e também como podemos passar em argumentos em nossas consultas. 7. Tipos escalar e passar em argumentos: Neste vídeo, vamos fazer duas coisas principais. Número um, descobrimos como analisar argumentos em nossas consultas. Isso nos permitirá fazer muito mais, incluindo acessar os dados de amostra que criamos anteriormente. Número dois, até agora só olhamos para o tipo de corda. Quero mostrar-lhe quais outros tipos também estão disponíveis. Por padrão, o GraphQL tem cinco tipos escalares, que estão disponíveis para descrever nossos dados. O que são estes no comentário no topo? O primeiro, que já olhamos é corda. Nós também temos um inteiro, um flutuador, um booleano, e finalmente um ID. Esses tipos são tipos bastante padrão em muitas linguagens de programação, e nada específico para GraphQL. Um número inteiro é um número sem um ponto decimal. Um número flutuante ou um número de ponto flutuante é um número que tem uma casa decimal. Uma string, que já vimos, é uma string ou uma sequência de caracteres, como uma letra, uma palavra ou uma frase de textos. Um booleano é um valor simples verdadeiro ou falso. Finalmente, um ID, que é um identificador exclusivo, muitas vezes usado como uma chave única para cada item em nosso banco de dados. Faremos uso de alguns deles em um momento. Outra coisa que usaremos muitas vezes é passar argumentos em nossas consultas. Argumentos funcionam da mesma forma que a passagem de argumentos para uma função regular. Eles fornecem algumas informações adicionais que podemos usar. Nós adicionamos argumentos entre parênteses logo após o nome da consulta, como este. O nosso filme é o nosso nome de consulta. Agora podemos passar um título para este filme. Novamente, isso também tem um tipo, que você pode definir para ser uma string. Isso também tem o ponto de exclamação, significa que a string é necessária e a contagem do valor de null é retornada. Isso significa que quando chamamos a consulta de filme a partir dos playgrounds GraphQL, também será capaz de passar no título null dois. Bem, o que acontece, temos este título quando passamos. Bem, este é o trabalho do resolvedor lidar com isso da maneira que quisermos. Para começar nos resolvers com nosso filme, incluímos quatro parâmetros em nosso método resolvedor. Estes são pai, args, contexto e também informações. Vamos entrar em mais detalhes ao longo do curso, mas por enquanto, estaremos usando args, que é abreviação de argumentos. É assim que podemos acessar esses argumentos, como o título do filme, que você passa. Em vez de retornar uma string simples, eu vou usar os backticks para retornar um template literal, que é apenas JavaScript simples, e dizer, meu filme favorito é, seguido por um espaço, e então precisa símbolo de dólar para injetar nossos dados dinâmicos. Os dados que queremos injetar na string vive na propriedade args. Isso é chamado de título, que corresponde ao título que passou como um argumento. Se você não usou literais de template antes, isso envolve o uso de backticks no lugar das citações. Em seguida, podemos misturar em texto simples com uma variável usando essas chaves. Para o campo de jogos GraphQL, agora podemos testar isso. Tenho o parquinho aberto no Chrome. Talvez seja necessário reiniciar o servidor. Feche-o com Control C. Em seguida, execute o nosso servidor novamente com nó, fonte, index.js. Quando isso está sendo executado e podemos atualizar os playgrounds do GraphQL, e podemos testar isso. Temos o usuário ainda de antes. Agora precisamos mudar isso para ser um filme. Agora podemos passar em nossos argumentos dentro dos parênteses. Abra e feche os colchetes. Então podemos passar em nosso título, que novamente é uma corda. Podemos adicionar qualquer nome de filme aqui dentro. Queremos adicionar um nome de filme lá. Em seguida, aperte o botão “Play”. Agora vamos ver nossa série completa do meu filme favorito é Demolimento Ralph. Mas e se o usuário não inseriu um título? Vamos remover a nossa corda e depois apertar “Play” mais uma vez. Agora só vemos o texto inserido do meu filme favorito é. Bem, isso agora parece um pouco tolo, mas o resolvedor está disponível para lidar com isso da maneira que quisermos usando JavaScript. Podemos adicionar uma declaração JavaScript if dentro do nosso resolvedor para primeiro verificar se um título foi passado em. Dentro do nosso filme, poderíamos dizer se args.title. Se esses dados existirem, podemos cortar nossa declaração de retorno, colar isso dentro da instrução if. Isso será executado se tivermos um título passado. Se não, podemos dizer retorno 'Por favor, digite seu filme favorito... ' Agora guarde isso. Controle C para reiniciar o servidor. Para o playground, recarregue e aperte “Play”. Agora vemos o texto de backup de “Por favor insira seu filme favorito”. Também podemos adicionar vários argumentos na consulta também, o que é uma abordagem útil ao consultar dados, como um usuário dentro do nosso typedesk. Se descermos até nosso usuário aqui, abra e feche os colchetes logo depois. Podemos passar em um ID de usuário e esta é nossa primeira chance de olhar para um tipo de escala diferente de ID. Novamente, podemos usar o ponto de exclamação porque este é um campo obrigatório que vai retornar um valor. Podemos adicionar, separado por uma vírgula, um segundo argumento de nome. Isto vai ser uma corda. Podemos adicionar um e-mail. Isso também será uma string. Em seguida, para baixo em nosso método resolvedor, podemos passar os mesmos quatro parâmetros em nossa função. Isto é pai, args, CTX, que é abreviação de contexto, e nossa informação. Novamente, não precisamos de todos os quatro argumentos são o momento. Bem, o esboço tem o hábito de escrevê-los para que eles se tornem mais familiares. Como estamos transmitindo um ID de usuário, nome e e-mail, faria sentido criar um objeto de usuário forma semelhante aos usuários em nossos dados de exemplo. Vê-lo-ia aqui no topo? Então esta é a mesma estrutura que vamos criar dentro do resolvedor. Primeiro de tudo, vamos criar o objeto de usuário com base nos args. Podemos fazer isso configurando uma constante com um nome do usuário e definir isso para ser nosso objeto. Podemos definir o ID assim como nos dados de amostra, em seguida, o nome e o e-mail. O ID será de Args.id. O nome vai ser args.name. Finalmente, o e-mail será args.email. Este ID, nome e e-mail também está combinando com os args que estão passando um pouco aqui. Voltar para baixo, agora em vez de retornar nossa string, vamos retornar este objeto de usuário. Dá-nos um salvar, Controle C para fechar o servidor e, em seguida, reiniciar o nosso servidor. De volta para os playgrounds. Podemos recarregar isto para obter a nossa informação. Altere isso para ser usuário. Dentro de nosso usuário adicionamos um ID. Podemos adicionar qualquer ID que quisermos aqui, eu só vou para “123456". O nome, o e-mail. Basta inventar qualquer e-mail aqui dentro. Agora podemos tocar “Play”. Quando apertamos “Play” agora no playground vemos um erro em vez dos dados que esperamos obter de volta. A mensagem de erro é, “String não pode representar um valor” seguido por nossos objetos. Você já deve ter notado qual é o problema aqui. Se não, podemos dar uma olhada se voltarmos à nossa consulta. Estará em nossa consulta para o usuário, que é esta linha aqui. Bem no final, estamos devolvendo uma corda. Mas nosso usuário é estruturado como um objeto dentro do nosso resolvedor. Nos tipos escalares que olhamos anteriormente. Olhe para o topo, podemos ver que o objeto não é um dos tipos escalares fornecidos pelo GraphQL. Isso é bom, porém, uma vez que o GraphQL nos permite criar um tipo personalizado chamado um tipo de objeto. Isto é exactamente o que vamos cobrir a seguir. 8. Tipos de objetos personalizados: Nós olhamos para o problema no último vídeo, que muitas vezes os dados que queremos de volta não são tão simples quanto uma string. Este é o lugar onde os tipos de objetos entram em jogo. Como eles soam um tipo de objeto é estruturado como um objeto e podemos declarar exatamente quais campos nós recebemos de volta do servidor dentro de nossas tarefas de tipo, que temos aqui. Fora deste tipo de consulta raiz, podemos configurar um novo tipo de objeto de cliente de usuário. Adicione o usuário de tipo e, em seguida, abra e feche as chaves, certificando-se de que isso ainda está dentro do bactics. Este tipo de usuário pode conter qualquer estrutura que queremos. No nosso caso, queríamos espelhar a estrutura do usuário que você usou antes adicionando os campos ID, nome e e-mail. Primeiro de tudo, usamos o ID, que é um tipo de ID. Passamos um nome, que vai ser uma corda. Então vamos passar o e-mail, que novamente é um tipo de string. Agora em nossa consulta logo acima, vez de retornar uma string para o usuário, agora podemos retornar nossos objetos de usuário. Novamente, podemos adicionar o ponto de exclamação dizendo que não queremos retornar nenhum valor nulo. Dê a isso um Salvar, desce o servidor e, em seguida, reinicie. Se não tivermos erros. Agora podemos voltar para os playgrounds do Graphql. Se você ainda tem a consulta do usuário aberta, podemos atualizar e, em seguida, tocar usando a mesma consulta. Desta vez não recebemos o erro que tivemos antes. Em vez disso, a mensagem de erro é type user deve ter uma seleção de sub-campos. Isso só significa que precisamos dizer ao servidor quais campos queremos obter de volta de sua consulta. Logo após consulta do usuário, também podemos adicionar em algumas chaves. Abrir e fechar estes nunca pode declarar qual dos nossos três campos queremos voltar. Vou adicionar ao ID, vou adicionar o nome do usuário e também o e-mail também. Podemos, em seguida, enviar esta consulta fora novamente pressionando play ou comando ou controle enter. Isso agora retornará nossos dados de usuário como um objeto com o ID, nome e e-mail, que especificamos dentro daqui. Podemos devolver qualquer quantidade desses campos. Não temos que devolver tudo de graça. Este é um dos benefícios de usar o graphql. Podemos obter de volta apenas os dados exatos que queremos. Temos APIs tradicionais, podemos recuperar todos os dados mesmo que não sejam necessários. Agora vou fazer mais um tipo objetivo para o nosso filme. Eu gostaria de encorajá-lo a dar este um ir primeiro antes de seguir junto, vamos primeiro criar um tipo de objeto chamado filme assim como fizemos para o usuário apenas ouvir. Com os campos dentro de ID e tittle. Em seguida, modifique nossa consulta logo acima para retornar este novo tipo em vez de uma string. Vamos começar apenas com o usuário. Isto vai ser um tipo de filme. Como mencionado antes isso vai ter o ID como o campo, com o ID como o valor que você retorna e, em seguida, também um campo de título, que irá retornar uma string. Em seguida, o resolvedor de movimento logo acima, em vez de retornar uma string, queremos retornar o objeto que acabamos de criar, que está se movendo. Também adicionar em nossos segundos argumentos de ID, que vai retornar o tipo de ID e separá-los com uma vírgula. Movendo-se para baixo para o resolvedor de filme, também podemos criar um objeto com este ID e título. Vamos remover a declaração de antes. Em seguida, podemos criar nossas constantes chamado serviço de filmes. Este opta por ser o nosso objeto, que tem o ID. Eu vou pegar o ID de args dot ID separado por vírgula, o título. Mas você também terra a partir de args, então título e, em seguida, podemos substituir a nossa cadeia de retorno com o objeto de filme que acabamos de criar. Certo, então agora de volta ao terminal, controle C para mais perto e reinicie. Os playgrounds, podemos recarregar isso e podemos testar isso agora dentro dos playgrounds. Vou abrir uma nova conta. Vamos consultar o nosso filme. Dentro do filme, podemos passar a identificação. Qualquer identificação está bem. Vou adicionar um, dois, três. Em seguida, podemos passá-lo no segundo argumento, que é o título do filme. Vou adicionar a Vida Secreta dos Animais de Estimação. Assim como antes, se formos em frente e jogar isso, vamos agora dizer quando precisarmos de uma seleção de sub-campos do nosso filme, os sub-campos terão a opção de título de ID assim por diante um está fora, ambos dentro daqui, em seguida, clique e agora retornaremos com os dados do filme, com o ID e também o título. uso desses tipos de objetos personalizados nos permite ter muita flexibilidade sobre como queremos que nossos dados pareçam e se comportem. Vou fazer uso desses tipos personalizados muito mais à medida que vamos para o resto do curso. 9. Trabalhando com o Contexto e matrizes: No início do curso, adicionamos alguns dados de amostra para trabalhar. Isso funcionará como nosso banco de dados temporário até que adicionemos um real em uma seção posterior. Em nosso projeto, em nosso arquivo index.js, incluímos nossos dados de amostra no topo, nesta linha de treinadores aqui. Começamos com os usuários, os filmes e os comentários em suas próprias variáveis e, em seguida, na parte inferior do arquivo, vamos criar um resolvedor, nós criamos um objeto de contexto, que é apenas aqui. Então passamos nossas três variáveis dentro, e é assim que podemos usar nossos dados de amostra nos projetos. Tudo o que passarmos para o contexto estará disponível para todos os resolvedores. Para começar, vou configurar uma nova consulta para obter todos os filmes de nossos dados de amostra. Então, em nosso TypeDefs, e na seção Query, queremos configurar uma consulta de filmes. consulta deste filme não precisa levar em nenhum argumento. Então podemos devolver um tipo de filme. Lembre-se que o tipo de filme é um objeto personalizado que criamos anteriormente. No entanto, essa abordagem é apenas parcialmente correta. Sim, queremos um tipo de filme devolvido, mas queremos uma série de filmes, não apenas um. No GraphQL, podemos envolver nosso tipo de filme em colchetes para declarar que queremos que este seja um array de filmes. Esta matriz também pode ser não-anulável também. Então, adicionar um ponto de exclamação logo depois significa que sempre podemos esperar um array de volta. Temos zero ou mais itens e não um valor nulo. Um ponto de exclamação após filme também pode ser usado como temos aqui. Significa que sempre esperamos recuperar um objeto de filme e não um valor de nulo. Tal como acontece com todas as consultas um resolvedor com o mesmo nome é necessário, que é a função. Então role para baixo. Depois do nosso filme, também podemos criar filmes. Isso também leva os mesmos quatro parâmetros. Temos pai, args, contexto e informações e, em seguida, adicionar uma vírgula direita no final para separar isso do nosso usuário. O objetivo deste resolvedor é buscar os filmes de nossos dados de amostra que foram adicionados ao contexto abaixo apenas aqui. Podemos acessar o contexto em nossos resolvedores usando este parâmetro de contexto de ctx. Então dentro daqui, podemos retornar ctx seguido pelo nome do contexto, que é filmes. De volta ao terminal, podemos reiniciar nosso servidor. Uma vez que isso está sendo executado, podemos ir para o playground GraphQL, reiniciar e, em seguida, podemos criar nossa consulta. Então Query, e nós queremos consultar para os filmes. Isso não leva em nenhum argumento, mas como é um tipo de objeto, queremos retornar alguns campos. Vou devolver a identificação e o título do filme, e depois enviar estes dados. O retorno do título são os filmes gratuitos da matriz de filmes em nossos dados de amostra. Voltar para as consultas, também podemos remover nossa consulta de usuário, que é esta linha apenas aqui como isso não é mais necessário para o projeto. No lugar, vamos procurar os usuários, isso vai retornar uma matriz do tipo de usuário, e então para baixo podemos criar o resolvedor correspondente, que será responsável por obter todos os usuários de nossos dados de amostra. Então, podemos modificar usuário, e ele muda para ser usuários em vez de retornar os objetos de usuário, vamos retornar nossa matriz de usuários do contexto. Então usuários, e é retorno de ctx.users. Mais uma vez podemos reiniciar o servidor, ir para o playground, e de fato, ele abre uma nova consulta de usuários. Novamente nenhum argumento é passado em, nós só precisamos retornar o ID, e na verdade podemos precisar recarregar isso, então o ID. Nós também temos o nome e o usuário também tem um e-mail. Então temos todos os usuários de nossos dados de amostra. Os dados finais que precisamos obter do contexto são as revisões. Novamente, eu encorajaria você a tentar isso por conta própria se você se sentir confiante em fazê-lo, lembre-se que ainda não configuramos um Tipo de Objeto Personalizado para a revisão, então também precisamos fazer isso para que essa consulta funcione. Então é isso que vou fazer agora. Podemos começar no TypeDef, logo após os usuários e filmes. Podemos criar um novo tipo, que é revisão. Esta revisão vai ter um ID, um filme correspondente, o texto de revisão, e também a classificação, que espelha nossos dados de amostra. Então nosso objeto seria muito parecido com isso. Ainda não adicionaremos o campo Usuário. Adicionaremos isso em uma data posterior, quando criarmos uma relação entre as avaliações e o usuário. Então de volta ao nosso tipo de revisão. O ID é o tipo de ID, o filme. Por enquanto, vamos adicionar isso como uma string. Uma vez que isso é salvo como uma string nas revisões. Em seguida, temos o texto de revisão. Este é um tipo de string também, e, finalmente, a classificação, que é um tipo de inteiro, e então nós configuramos a Consulta de Revisão. Então, role para cima até nossa seção Consulta aqui. Podemos adicionar na Consulta Comentários. Assim como antes isso vai levar em uma matriz do tipo de revisão. Agora podemos criar o resolvedor correspondente logo após os usuários. Este é chamado de comentários, que levará os mesmos quatro parâmetros de pai, args, o contexto e informações. Aqui dentro, tudo o que precisamos fazer é retornar o context.reviews para obter nossos dados de amostra. Ok, bom. Agora podemos reiniciar o servidor, ir para o campo de jogos GraphQL. Podemos remover a Consulta do Usuário e no lugar podemos adicionar nosso Tipo de Consulta para as revisões. Isso não é levar quaisquer argumentos como os dois últimos, tudo o que precisamos fazer é retornar os dados que queremos. Então eu vou adicionar o ID, o filme, o texto de revisão, e também a classificação. Mande isto. Agora obtemos uma série de avaliações de nossos dados de amostra. Agora configuramos nosso trabalho em operações para obter filmes e avaliações de nossos usuários. Mais tarde no curso, vamos substituir esses dados de amostra por um banco de dados real. Embora isso possa parecer complexo em primeiro lugar para cada um agora nós vimos que a maioria deles segue um padrão semelhante. Em seguida, vamos fazer uma pequena alteração em nosso projeto, que automaticamente reiniciar nosso servidor cada vez que fazemos uma alteração. 10. Restaurando automaticamente o servidor: Este será apenas um vídeo rápido para instalar um pacote NPM chamado nodemon. No momento, cada vez que fazemos uma alteração em nossos arquivos, precisamos fechar e reiniciar nosso servidor. Nodemon nos salvará fazendo isso reiniciando automaticamente as fotos do servidor quando salvarmos um arquivo. Nodemon está disponível para mais informações em nodemon.io, mas eu vou ir em frente e instalar isso no terminal. Vamos fechar o nosso servidor. Então podemos adicionar um npm install, —save-dev e, em seguida, o nome do pacote de nodemon. Aperte “Enter”. Isso puxará o pacote do npm. O save-dev salvará isso dentro de nosso package.json como uma dependência dev, significa que isso salvará isso como uma dependência somente durante o desenvolvimento. Bom. Uma vez instalado , podemos verificar isso no cyber e no package.json e verificar. Isso é salvo como uma dependência somente de desenvolvimento. No mesmo arquivo, rolando para cima, temos uma seção de script apenas aqui. Podemos adicionar um novo script de início para agora tirar vantagem de nodemon. Podemos adicionar “Start” dentro das citações seguidas por dois pontos. Npm start irá executar o comando que digitamos em seguida. Então, entre as citações, eu vou adicionar nodemon e, em seguida, o caminho do arquivo para o nosso servidor, que é src/index.js. Adicione uma vírgula logo depois disso para separar isso do nosso script de teste e então podemos dar a este arquivo um cofre. Isso é semelhante ao comando que executamos antes no terminal para iniciar o servidor. Mas agora, substituímos o nó por nodemônio. Agora, podemos experimentar isso. No terminal, podemos correr o NPM, iniciar e clicar em “Enter”. Isso então executa o script que especificamos que é nodemon src/index.js. Novamente, vemos que o servidor está sendo executado na porta localhost 4.000. Agora, se entrarmos em qualquer um de nossos arquivos em nosso projeto e apertarmos “Salvar”, fique de olho no terminal na parte inferior. Agora vemos que o servidor é reiniciado, significa que não precisamos fechar manualmente o servidor e reiniciá-lo após cada alteração. Isto é tudo o que precisamos fazer para que isto funcione. Em seguida, refatoraremos nosso código para manter as coisas mais organizadas. 11. Refactoring nosso código: Mesmo nesta fase inicial do nosso projeto, podemos ver que, tendo tudo no arquivo index.js, essa coisa está novamente um pouco lotada. Eu não vou levar alguns momentos para remover nossos TypeDefs de esquema, e também os resolvedores para fora deste arquivo e organizá-los em arquivos separados. Começando com nossos TypeDefs, onde chrony usamos os ticks traseiros para criar todas as nossas definições de tipo dentro. Nós também podemos tirar estes daqui e colocá-los em um arquivo GraphQL separado. Vou criar este arquivo dentro da pasta de origem e chamá-lo de Schema.Graphql. Podemos então voltar ao nosso índice e cortar todas as nossas definições de tipo daqui. Corte tudo, exceto os carrapatos de trás. Do tipo de revisão, todo o caminho até a nossa consulta, corte isso. Em seguida, cole-o em nosso schema.graphql. De volta no index.js, podemos excluir a string TypeDefs, que temos aqui e também nosso comentário de cima. Rolando para baixo até nosso servidor, agora precisamos modificar nossas definições de tipo para refletir isso. Podemos apontar os TypeDefs agora para a localização do nosso novo arquivo. O TypeDefs agora vai ser igual a uma string. Isto vai ser ponto slash. Usamos a pasta de origem e o arquivo foi schema.graphql. Salve o arquivo e, nesta fase, você deve talvez agora sair do playground e verificar as coisas ainda funcionando. Nosso servidor foi reiniciado automaticamente usando nodemon, então agora podemos atualizar os playgrounds. Em seguida, podemos recarregar nossas consultas e verificar se recebemos de volta todos os dados que queremos, em vez de quaisquer erros. Tudo isso parece estar funcionando bem. O próximo passo é mover os resolvedores para um novo arquivo 2. Novamente, no diretório fonte, vou criar um novo arquivo chamado resolvers com a extensão dot js. Sobre o index.js, podemos pegar todos os nossos resolvedores objeto. Vamos pegar tudo, incluindo o nome da const. Corte da cinta encaracolada de fechamento todo o caminho para cima. Tire-os do nosso arquivo de índice, cole-os no arquivo de resolvers. Em seguida, na parte inferior do arquivo, precisamos exportar este objeto resolvedores, para que isso funcione. Expusemos nosso arquivo com module.export e definimos isso igual ao nosso nome de resolvedores, que é o nome do nosso objeto no topo apenas aqui. Agora que exportamos este arquivo, agora podemos usá-lo novamente em nosso backup index.js em nosso arquivo de índice. Ao contrário de nossas definições de tipo, onde podemos passar em um arquivo diretamente, assim como temos aqui. Precisamos exigir esse arquivo no topo. Vamos criar uma nova constante chamada resolvers e definir isso para o nosso caminho de arquivo. Então, podemos exigir o caminho do arquivo como uma string, que é resolvedores de barra ponto. Este nome const de resolvers também corresponde ao nome que passamos para o servidor, que é apenas aqui. Não precisamos fazer mais alterações. A última coisa que quero fazer para refatorar nosso código é remover a consulta de filme. Já não precisamos disto para os nossos projectos. Então, podemos passar para o nosso esquema dentro do nosso objeto de consulta, remove a primeira linha de filme. Também nos resolvedores, podemos remover o resolvedor correspondente. Vamos encontrar o filme, podemos remover tudo isso da nossa seção de consulta, digamos este arquivo. Isto foi apenas para fins de demonstração no início do curso. Não precisarei mais disso para nosso projeto. Tudo o que resta a fazer é voltar aos playgrounds do GraphQL e testar se as coisas ainda estão funcionando. Então, atualize. Podemos tentar clicar em algumas dessas consultas. Parece que ainda temos os dados necessários de volta. Com tudo isso agora resolvido e nosso código é mais organizado. Agora podemos voltar ao GraphQL e descobrir como podemos configurar relacionamentos entre tipos. 12. Relacionamentos entre tipos: Por esta altura, já devemos ter uma melhor compreensão sobre como o GraphQL usa tipos. Mas em breve descobriremos isso muitas vezes. Precisamos configurar links ou relacionamentos entre esses tipos. Mesmo que estejamos apenas nos estágios iniciais do nosso projeto, já temos a necessidade de estabelecer relacionamentos. O slide é os tipos de objetos personalizados gratuitos que temos em nossos projetos no momento em que eles são todos independentes uns dos outros, mas não é assim que deve ser. Temos usuários que serão responsáveis por postar avaliações, então precisamos configurar um relacionamento entre o usuário e o tipo de revisão e podemos fazer isso adicionando um campo de revisão ao usuário. Como vemos aqui, esta será uma série de avaliações, uma vez que um usuário pode postar tantas críticas quanto quiser. Abaixo disso, nós também temos o tipo de filme e isso também vai precisar do mesmo relacionamento comentários para. Como a revisão em um filme é um ponto inteiro deste projeto, podemos adicionar nos campos de comentários, e isso também é um array, já que podemos ter várias avaliações para o mesmo filme. Para o tipo de revisão, isso também precisará de um relacionamento com o usuário que criou e também com o filme no qual se baseia. Teremos de fazer duas coisas para este tipo de revisão. Primeiro de tudo, precisamos mudar o campo de filme de um valor de string para um filme, um único filme, não uma matriz e, finalmente, configurar um campo de usuário, então vamos saber qual usuário criou essa revisão. Agora temos uma ideia clara de como podemos estabelecer nossos relacionamentos. Vamos agora passar para implementar as mudanças no próximo vídeo. 13. Como criar nossos relacionamentos parte 1: Agora vamos começar a trabalhar criando os relacionamentos para o nosso tipo de revisão. Como já analisamos, isso envolve dois campos. Quando ele mudou o campo de filme para retornar um filme em vez de uma string e um novo campo para o usuário que o criou. Vamos voltar para o schema.graphql em nosso projeto. Em nosso arquivo de esquema, podemos fazer isso um campo de cada vez. Role para baixo até o tipo de revisão e primeiro precisamos alterar o campo de filme, retornar um filme em vez de uma string. Isso nos permitirá quando consultar e resenhas e também extrair todos os dados do filme que é para e agora há mais um passo que precisamos dar no momento, cada vez que os arquivos do resolvedor para este tipo de revisão, ele pode resolver tudo isso campos com valores escalares sem problemas. Como estamos apenas retornando uma string, um inteiro ou um id, por exemplo, no entanto, ao consultar para esta revisão e encontramos um tipo de filme, que é um tipo de objeto personalizado. Também precisamos configurar um resolvedor separado, para GraphQL possa percorrer todos os filmes que correspondam e encontrar o correto para retornar. Se não criarmos este resolvedor, o GraphQL não tem como saber exatamente qual filme queremos encontrar. Salve este arquivo e, em seguida, podemos ir para o playground GraphQL e podemos tentar adicionar em nossos dados de filme para ser incluído. Se atualizarmos a consulta comentários, clique em reproduzir, vemos o tipo de filme. Agora isso não é mais uma string, deve ter uma seleção de sub-campos. Podemos facilmente adicionar isso com as chaves e adicionar o ID do filme e título também. Como eu recebo uma mensagem de erro dizendo: “Não podemos retornar null para um campo que não pode ser anulado” que está relacionado ao filme. Isso ocorre porque ainda não criamos este resolvedor mencionado antes para obter os dados de filme corretos sobre o arquivo.jsresolvers. podemos criar isso agora. Precisamos criar isso como uma nova propriedade, que é chamada de revisão para corresponder ao nosso tipo de revisão. baixo logo após a consulta, adicione uma vírgula e, em seguida, adicione o tipo de revisão de rota e, em seguida, resolvido por método, assim como fizemos anteriormente, mas o nome do método deve corresponder ao campo deste tipo de revisão. No nosso caso, isto é filme. Isso também leva o mesmo para parâmetros de pais, args, contexto e informações. A responsabilidade deste resolvedor é percorrer todos os filmes em nossos dados de amostra e encontrar aquele com o id de nossa revisão. Podemos fazer isso usando o método de busca JavaScript. Podemos adicionar um valor de retorno, então contexto, vamos percorrer todos os filmes. Onde o JavaScript encontrou o método? Cada filme encontra dentro deste loop será armazenado no nome da variável do filme. Este método find, que é apenas JavaScript regular irá executar esta função para cada item na matriz. Cada item da matriz de filmes é instalado dentro desta variável de filme, o que sugerimos aqui. Ele retornará através se o ID do filme de nossos dados de amostra. Retornar o movie.id corresponde ao ID do filme da revisão. Mas como acessamos o ID do filme da crítica? Nós acessamos isso usando um parâmetro que ainda não usamos, que é este pais apenas aqui, seguido pelo nome do campo do filme. Podemos verificar se isso é igual a parent.movie. Neste caso, os filmes são uma criança do tipo de comentários. O pai refere-se ao resolvedor um nível acima. Para entender como isso funciona melhor, vamos dar uma olhada no que está acontecendo em nosso esquema. Olhando para o nosso tipo de revisão, isso como sabemos tem um muito em resolver. Se o resolvedor pode resolver os valores de id, revise o texto e também classifique imediatamente porque estes são todos os tipos escalares. No entanto, com este tipo de filme aqui, ele não saberá imediatamente qual filme retornar, então executamos este resolvedor separado, que acabamos de criar chamado filme. Este resolvedor de filme está aninhado dentro da revisão e é por isso que temos que usar os pais para obter dados do tipo de revisão. Isso pode parecer um pouco confuso no início, mas veremos mais alguns exemplos disso, o que deve ajudar. Agora, se salvarmos esse arquivo com antecedência no playground do GraphQL, podemos executar novamente a consulta de comentários, atualizar os playgrounds, clicar em “Play”. Agora encontramos os dados correspondentes do filme para cada revisão que foi vinculado pelos IDs. Vamos fazer isso novamente, mas desta vez adicionar um usuário para revisão. No schema.graphql, primeiro adicionamos um campo de usuário ao tipo de revisão. Na parte inferior, um novo campo de usuário, que retornará um tipo de objeto personalizado de usuário nos dados de amostra. Se formos para os comentários, você pode ver que já temos um tipo de usuário aqui, que está ligado a um id do usuário assim 1002, 1001 e isso todos usam os ids do topo. Agora precisamos criar o resolvedor para este campo de usuário e o trabalho deste resolvedor é combinar este ids. Este resolvedor seguirá um padrão semelhante ao último no arquivo resolvers. Este campo de usuário também pode ser adicionado ao mesmo tipo de revisão para que possamos adicionar isso logo após o filme, adicionar uma vírgula, o nome do campo do usuário, que também leva os pais, os args, o contexto e também as informações. Dentro daqui queremos adicionar um valor de retorno, que você vai procurar o contexto e a matriz de usuários. Isso também vai usar o método de busca JavaScript para percorrer cada item na matriz e armazenar em um valor chamado usuário. Para cada usuário que é retornado da matriz, vamos retornar através se o id do usuário é igual a parents.user. ID do usuário será o campo de nossos dados de amostra, raw particularmente usuário. O parents.user será o id para baixo em nossas avaliações deste campo de usuário apenas aqui. Voltar no playground para salvar este arquivo, cabeça e recarregar os comentários que também podemos adicionar nosso usuário à seleção. O usuário, este é também um objeto para que possamos adicionar em alguns campos. Vamos pegar o nome e clicar em “Enter”. Agora, para cada revisão dentro de nossos dados de amostra, pesquisamos o filme e extraímos o ID e o título. Eu também encontrei a correspondência no usuário de nossos dados de amostra pelo id. Este é todos os relacionamentos que agora precisamos para o tipo de revisão. Continuaremos a ter pouca prática com relacionamentos no próximo vídeo, onde vincularemos tanto o usuário quanto o tipo de filme aos comentários. 14. Como criar nossas relações parte 2: Deslize fatorial de antes. Ainda temos os dois relacionamentos na configuração do lado esquerdo. Precisamos vincular o usuário a uma avaliação, isso nos permitirá consultar os usuários e também ver os comentários que eles fizeram. Também abaixo, o mesmo campo de comentários para o filme Tipo 2. Isso nos permitirá consultar filmes e depois ver os comentários de cada um. Ambos os relacionamentos seguem a mesma pessoa do último vídeo, adicionamos um novo campo chamado comentários e, em seguida, criamos um resolvedor para buscar os dados entre ele. Novamente, adicionamos esses novos campos em nosso esquema. Vamos começar com o tipo de usuário. Apenas na parte inferior, eu vou criar um novo campo de comentários e este vai ser um array do tipo de revisão. Como o usuário pode colocar várias revisões, isso precisa ser um array. Em seguida, precisamos configurar um resolvedor correspondente para corresponder ao ID do usuário. O que vamos fazer se olharmos os dados da amostra? Se formos para baixo para comentários dentro do resolvedor, vai loop através de todas as avaliações usando JavaScript, e, em seguida, encontrar o ID de usuário para cada um. Isto vai ser acessado com comentários ou usuário, vamos então verificar se isso é igual aos pais que é o nosso user.id. Uma vez que você tem um muito, isso irá retornar verdadeiro e, em seguida, fornece as informações que precisamos. Agora, podemos salvar nosso esquema e, em seguida, passar para os resolvedores, e criar este resolvedor para o tipo de usuário chamado comentários. Terminamos com os resolvedores para o tipo de revisão, vamos até o final e, em seguida, criar uma nova propriedade chamada usuário. Isso será um objeto. Uma vez que, como você sabe de antes, podemos adicionar vários resolvedores aqui dentro. Nós só precisamos de comentários no momento, vamos adicionar o nome do método das revisões. Aprecie os pais, os args, o contexto e a informação. Então, semelhante ao acima, vamos usar um método e em vez de usar o método find, vamos usar o método de filtro, uma vez que podemos retornar vários valores ou várias revisões. Vamos retornar o context.reviews.filter. Novamente, isso é apenas JavaScript simples, vamos filtrar através de todas as revisões e, em seguida, configurar nossa função. Cada item nas revisões será armazenado nesta variável de revisão. O que queremos fazer aqui? Bem, assim como olhamos nos dados de amostra, queremos corresponder ao review.user. Se você rolar para baixo este campo apenas aqui, agora queremos combiná-lo com um ID de usuário. Podemos pegar o usuário verificando se isso é igual ao parents.id. Agora, guarde isto e vá para o parque infantil. Podemos ir para a consulta de nossos usuários, atualizar, quando tudo isso estiver funcionando porque ainda não adicionamos o novo campo. Com apenas ter o e-mail, também podemos adicionar em comentários, dentro dos comentários que também precisamos adicionar nos campos que quer voltar. Vamos adicionar o texto de revisão e a taxa e tudo isso funciona bem. Ao receber essa informação, provavelmente queremos obter o título do filme para, então saiba para qual filme esta crítica é. Podemos aninhar isto dentro das críticas, para podermos aceder ao filme e, em seguida, aos campos que queremos recuperar? Eu só vou adicionar o título e, em seguida, aninhado dentro, nós também obter este título para cada revisão. Como você sabe que este filme vai funcionar quando aninhado dentro de comentários? Bem, isso é porque você já configurou o resolvedor para isso no último vídeo. Ao retornar um filme de revisão é uma propriedade no tipo de revisão. De volta ao nosso esquema, podemos ver isso se descermos para o nosso tipo de revisão, temos o filme, em seguida, temos um resolvedor correspondente para buscar filme sobre o resolvers.js, e há este método apenas aqui. Agora, as coisas estão começando a se encaixar. Agora vou formar relações entre os nossos tipos. Com isso no lugar, temos apenas um relacionamento final para adicionar e que é também adicionar o mesmo campo de comentários para o tipo de filme. Se você se sentir confiante, vá em frente e dê uma chance por conta própria, ele vai fazer você pensar sobre como as coisas se encaixam, e você também pode acompanhar comigo depois. Vamos começar com o tipo de filme no esquema. Vamos adicionar os mesmos campos de comentários. Logo após o título, isso também irá retornar o tipo de array. Como o filme pode ter várias revisões, para simplificar nesta fase nos dados de amostra, acabei de adicionar uma única revisão em vez de uma série de múltiplas revisões, mas lidaremos com várias avaliações mais tarde ao usar PRISMA. Para os resolvedores, configuramos nosso tipo de filme na rota. Salve este arquivo, temos nossos comentários, temos nossos resolvedores de usuário, e em seguida, também precisamos configurar nossos resolvedores de movimento e este é um objeto e, em seguida, adicionamos o nome da propriedade. Estes são os comentários, assim como acima de nós nos quatro parâmetros. Isso também irá retornar uma visão geral de filtro. Retorne ctx.reviews.filter e configuramos nossa função. Aqui dentro, vamos adicionar um valor de retorno. Assim como acima, vamos retornar a avaliação, mas desta vez queremos segmentar o ID. Se formos para nossos dados de amostra e para baixo para as avaliações, vamos pegar uma revisão pelo seu ID, e então vamos verificar se isso é igual a parents.reviews. Os pais apontarão para os filmes e, em seguida, o ID armazenado nas avaliações. Uma vez que obtemos uma correspondência entre esses dois valores, vamos então retornar true cada item em nossa matriz. De volta aos resolvedores, vamos terminar isso, verificar se isso é igual a pais.reviews, dar isso um salvamento e depois para o playground, precisamos ir para a consulta para os filmes. Vamos recarregar o navegador. Após o título, podemos passar nos comentários, podemos obter o texto de revisão, a classificação, e também podemos verificar qual usuário postou esta avaliação como acesso ao tipo de usuário, e obtemos o nome de usuário, pressione Enter e agora veja nossa visão foi retornada para cada filme. Nós também temos o usuário correspondente. Novamente, uma vez que configuramos o resolvedor de um usuário para as revisões, fizemos isso em nosso esquema. Se formos para o nosso tipo de revisão, também configuramos este resolvedor para pegar o usuário necessário. Ótima. Com tudo isso agora funcionando corretamente, todos esses são nossos relacionamentos agora no lugar. 15. Introdução às Mutações: Na última seção, focamos principalmente em obter dados de volta, que já estava lá usando consultas. Isto foi de nossos dados de amostra. Que em breve será um banco de dados real. Agora vamos mudar as coisas e enviar os novos dados, de volta para o nosso banco de dados. Eles são chamados de mutações e eles podem enviar qualquer coisa que você quiser, como um novo usuário, um novo filme ou uma nova revisão. As mutações seguem um padrão semelhante às consultas que você já usou. Nós configuramos as mutações que queremos no esquema, declarando que tipo de dados queremos obter de volta. Então estes também têm um muito em resolver também. Um resolvedor por mutação. Para começar, podemos adicionar uma nova propriedade de mutação raiz ao nosso esquema atualmente temos o tipo, então vamos adicionar a segunda propriedade raiz da mutação novamente como um objeto, que possamos agrupar todas as nossas mutações juntos. Analisamos brevemente isso mais cedo ao configurar os devs de tipo. Esta é uma das três propriedades raiz. O terceiro é a assinatura, que também cobrirá em breve. Então, como fizemos com as consultas acima, adicionamos o nome da nossa mutação, seguido pelo tipo que queremos retornado. Eu vou criar uma mutação de inscrição, inscrever um usuário, que vai retornar o tipo de usuário, U maiúsculo. Isso pode retornar qualquer uma da mesma escala de tipos, como a string, um booleano, ou também nossos tipos de objeto personalizados, como este usuário. Ao assinar o usuário, não é muito útil se não podemos passar nenhum dado sobre o usuário, e novamente, podemos fazer isso facilmente passando argumentos. Vamos em frente e adicionar os colchetes após a inscrição. Podemos adicionar um nome de usuário, que será um tipo de string separado por vírgula, um e-mail, também com o tipo de string, você pode notar que estamos apenas passando em dois argumentos para esta mutação para o usuário. Mas se deslocarmos para baixo até o tipo de usuário, esse usuário terá quatro campos. Bem, isso ocorre porque o ID também será gerado pela Prisma mais tarde no curso, e não é algo que esperaríamos que o usuário forneça, já que precisa ser único. Como as revisões têm um tipo de objeto personalizado, elas podem ter seu próprio resolvedor para buscar os dados necessários. [ inaudível] os resolvedores para cada mutação. Salve este arquivo e, em seguida, saia para os resolvedores. Mutação também é uma propriedade raiz, então eu vou adicionar isso após consulta. Encontre a cinta de fechamento, que está logo acima da revisão, pode adicionar mutação, salvar como um objeto e adicionar uma vírgula, separar isso das avaliações. Este é um objeto que leva em um método ou um resolvedor para cada mutação. A única mutação que temos é chamada de inscrição, e isso também leva os mesmos quatro argumentos que ao criar uma consulta, então isso é pais, args, contexto e informações, e então as chaves. O tipo de usuário é um objeto, então precisamos também criar um objeto de usuário para corresponder à estrutura. Const, usuário, e podemos definir isso igual a um objeto. O primeiro campo é o ID, e isso também será gerado pela Prisma mais tarde, mas por enquanto precisamos criar um para armazenar em nossos dados de amostra. Se passarmos para nossos dados de amostra e, em seguida, ir e dar uma olhada no objeto de usuário, cada ID começa em 1.000, então temos 1.001, 1.002 e 1.003, para que possamos corresponder esse padrão no objeto de usuário. Novamente, não se preocupe muito com o que estamos fazendo aqui, isso é apenas para gerar um ID temporário até que usemos Prisma mais tarde. Podemos criar o ID, vai ser uma string modelo, para que possamos usar os ticks traseiros. Queremos que o ID comece com um zero duplo e, em seguida, queremos que isso incremente em um para cada usuário em nossa matriz. Podemos então fazer o quarto dígito dinâmico, passando-o usando JavaScript. Vamos fazer um loop através da matriz de usuários com ctx.users e, em seguida, pegar o comprimento da matriz. Atualmente, temos três usuários dentro de nossos dados de amostra. Vou aumentar isso em um com cada usuário que vamos adicionar. Adicione uma vírgula no final lá e então podemos ir em frente e adicionar os próximos dois campos, que são mais simples. Podemos pegar o nome e e-mail dos args como já vimos ao usar consultas. O nome vai ser args.name. O e-mail, args.email e, em seguida, podemos ir em frente e empurrar este novo usuário para a nossa matriz de usuários. Pegue o context.users. Podemos então usar um método de matriz JavaScript para enviar este usuário para nossos dados de exemplo. Este método push é apenas JavaScript regular e nada específico para GraphQL. Finalmente, podemos então retornar o novo usuário na próxima linha. Assim como consultas, também podemos testar nossas mutações no playground GraphQL. Desta vez vou abrir uma nova conta. Este é o tipo de mutação, então nós configuramos isso assim, e então nós podemos adicionar nossa inscrição dentro. Na verdade, precisaremos atualizar. Agora que ele também está completo, então inscreva-se. Cadastrar-se vai assumir os argumentos. Primeiro de tudo temos o nome, então vamos adicionar um nome aqui dentro, e também o segundo foi e-mail. Usuário, ambas as strings. Você pode adicionar quaisquer dados que você deseja dentro daqui para o usuário. Isso também vai retornar um tipo de usuário. Precisamos pegar o ID, o nome, e também podemos pegar o e-mail também, executar isso. Agora nosso cadastro foi executado com sucesso, temos o ID, o nome e o e-mail. Vemos que o ID foi aumentado pelo valor de um. Se apertarmos “Enter” novamente, você verá 1.005 e novamente 1.006, então isso aumenta em um para cada item na matriz. Vamos executar novamente nossa consulta de usuários e verificar se esses usuários extras foram adicionados. Role para baixo, teremos o nosso livre de dados de amostra e, em seguida, temos os que acabamos de adicionar em apenas então. Como ainda não estamos usando um banco de dados permanente, quaisquer alterações feitas nos dados de amostra serão armazenadas na memória, tornando-as temporárias. Podemos reiniciar o servidor salvando qualquer arquivo, então Command ou Control S. Voltar para o playground. Vamos recarregar e podemos executar novamente a consulta de usuários. Agora rolando para baixo, nós apenas vemos os que estão armazenados em nossos dados de amostra e não os que acabamos de adicionar de nossa mutação. Em aplicativos do mundo real, os argumentos de nome e e-mail seriam fornecidos a partir do frontend, como a página de inscrição ou login de um site. Mas como o GraphQL é para o back-end, testamos coisas neste playground, e isso é tudo o que precisamos fazer para que possamos enviar dados para o nosso servidor. Em seguida, vamos olhar para adicionar mais algumas mutações que vamos precisar em nossos projetos. 16. Mutações de filme e revisão: Agora analisamos como as mutações funcionam. Vamos agora adicionar mais dois. Um para criar uma crítica e outro para criar um novo filme. Começando no esquema com a mutação Criar filme. De volta ao nosso projeto, e ao schema.graphql. Vamos usar os mesmos objetos de mutação que usamos para a inscrição antes. Na nova linha, vou chamar isso de CreateMovie. Este CreateMovie também vai levar em alguns argumentos. Na verdade, este será um único argumento de título, que vai ser do tipo string. Também precisamos definir o valor de retorno, que será nosso tipo personalizado de filme. Para o arquivo resolvers, podemos criar o resolvedor correspondente dentro deste objeto de mutação. Logo após a inscrição, separe isso com uma vírgula, CreateMovie, tomando os pais, os args familiares, o contexto e as informações. Seguindo um padrão semelhante ao cadastro do usuário, vamos criar um objeto de filme. Isso também vai ter um Id e um título, e mais uma vez precisamos incrementar o Id por um cada vez, verificando quantos filmes estão dentro dos dados de amostra e, em seguida, aumentá-lo em um em cada adição. Os dados de amostra devemos ir para os filmes, vamos gerar o ID e também o título. Mas atualmente vamos deixar os comentários vazios, pois isso será ligado com Prisma mais tarde. Vamos em frente e criar nosso filme de const de objetos. Isso será igual à nossa propriedade ID. Em seguida, crie os backticks para tornar este modelo literal. Todos os IDs de nossos filmes nos dados de amostra começam com 200, 2001 e 2002. Vamos começar com 200, e então vamos adicionar no final o valor de context.movies.length e, em seguida, aumentar esse comprimento de matriz em um para cada adição, separado por uma vírgula. Em seguida, precisamos adicionar o título, que é muito mais simples, podemos pegar isso fora dos args. Assim como o usuário acima, nós também precisamos empurrar isso para a matriz ctx.movies, o método push JavaScript, e então eu vou empurrar nosso objeto de filme. A última coisa a fazer é devolver este filme a partir deste método, e então estamos prontos para ir. Para o Playground, vamos testar isso. Recarregar. Ainda não temos essa mutação, para criar um filme, então vamos adicionar isso a uma nova guia. Criar filme. Isso leva em um único argumento de título, e eu vou adicionar um nome de filme de “A Vida Secreta de Animais de Estimação”. Assim, e então podemos devolver nossos valores para o filme. Vamos adicionar o ID e também um título, e então executar isso, e isso parece estar funcionando bem. Temos nossos dados agora retornados à direita. Podemos verificar se isso está funcionando, buscando todos os filmes da nossa consulta. Vamos ver isto, e no fundo temos o nosso novo filme “A Vida Secreta dos Animais”. Ótimo. Em seguida, podemos completar a nossa mutação final e que é criar uma nova revisão. Como sempre, começamos configurando a mutação em nosso esquema. Para o schema.graphql podemos adicionar uma primeira mutação, que é criar revisão. Isso vai recuperar o tipo de revisão e é necessário. Também precisamos passar as informações para nossa revisão pelos argumentos. Vou adicioná-los a uma nova linha, já que vai ser para diferentes. Como esta revisão vai ser para um filme específico, precisamos vincular isso adicionando um ID de filme, que é um tipo escalar de ID. Precisamos também de acrescentar o texto para a revisão. Vou adicionar isso como texto de revisão, que é um tipo de string. Também precisamos adicionar uma classificação, que é um tipo de inteiro, e então também precisamos vincular essa revisão ao usuário que criamos adicionando um campo ID de usuário. Isso também pode retornar um ID, e isso é tudo o que precisamos para criar uma revisão. Em seguida, nosso resolvedor correspondente logo após CreateMovie, adicione uma vírgula no final e podemos criar nosso resolvedor para criar revisão, seguindo um padrão semelhante, então pais, args, contexto e informações. Então nós configuramos nossa constante de revisão, que vai ser nosso objeto, que vamos construir. Em um exemplo de dados se olharmos para as avaliações no final, vemos o ID começa com 300. Assim como os dois métodos acima, vamos configurar nossa propriedade ID e, em seguida, incrementar isso em um cada vez. Vamos começar com 300. Podemos então obter o comprimento da matriz comentários com ctx.reviews.length mais um. A próxima propriedade que precisamos é para o filme. Podemos pegar isso com Args.Movieid. Em seguida, temos o texto de revisão. Este é args.reviewText. O próximo é para a classificação, e isso é dos args novamente, então args.rating. O final é vincular esta revisão a um usuário, e podemos pegar isso do args.userId. Logo após esse objeto, fazemos nossas duas coisas familiares. Primeiro de tudo, precisamos empurrar isso para o objeto comentários com ctx.reviews.push, adicionando em nosso objeto de revisão e, finalmente, precisamos retornar essa revisão do nosso método. Em uma aplicação real, queremos restringir a classificação a um valor particular, digamos entre zero e cinco. Mas isso é bom para o momento, já que acabamos de aprender sobre o GraphQL. Guarde este ficheiro e depois para o Playground, podemos testar isto. Recarregue o navegador, abra uma nova aba com o tipo de mutação, e o nome para isso foi Criar revisão. Vou adicionar isso em uma nova linha desde que esses múltiplos argumentos começam em. A primeira foi uma identificação de filme, e como queremos testar se isso está realmente funcionando, vamos pegar uma identificação de filme real. A partir de nossos dados de amostra, vamos pegar 2002, e adicionar isso em. Na próxima linha está o texto de revisão. Esta é uma string, então podemos adicionar qualquer coisa aqui, separá-la por uma vírgula. A próxima linha é para a classificação. Vou dar a isso um valor de cinco e, finalmente, o ID do usuário, e isso novamente precisa corresponder a um ID real dentro de nossos dados de amostra. Digamos que o Usuário 1 criou este. Copie 1001, adicione isso. Logo após esses colchetes, também precisamos adicionar as chaves para declarar quais campos queremos voltar, a revisão que queremos obter de volta em nosso ID. Também podemos recuperar o título do filme. Então filme, e então um dos campos retornados será o título, e depois de volta aos nossos campos normais de revisão, então é o texto de revisão. Nós também podemos pegar a classificação, e então, finalmente, nós também podemos pegar o usuário que criou isso. Para o usuário, também precisamos recuperar um conjunto de campos de seleção. Eu só vou pegar o nome. Vamos testar isso. Recebemos uma mensagem “Esperado tipo Int; encontrado cinco”. Isso só precisa ser sem as citações. Execute isso novamente, e temos uma revisão criada com sucesso, que também está vinculada ao filme e também ao usuário. Devido aos resolvedores que criamos anteriormente para esses tipos, vamos agora testar a consulta para revisões. Podemos refazer isto. Vamos rolar para baixo, e temos a revisão que acabamos de criar. Isto significa que todas as nossas mutações estão agora a funcionar. Podemos criar usuários, filmes e comentários. Nós também obtemos de volta todos os dados exatos que queremos de cada um. 17. Assinaturas: No início do curso, mencionamos que nossos gráficos de tipo têm tipos re-root. Esses tipos são Consulta, Mutação e Assinatura. Já cobrimos os dois primeiros. Agora vamos dar uma olhada em como as assinaturas funcionam. Como uma consulta, a assinatura é uma maneira de obter os dados que queremos. No entanto, uma das desvantagens de uma consulta é nem sempre sabemos se os dados mudaram desde que os recuperamos. Se quisermos ter certeza, temos que continuar fazendo a mesma consulta quantas vezes forem necessárias. Esta não é uma maneira muito eficiente de fazer as coisas. É por isso que as assinaturas entram em jogo. Podemos subscrever alguns dados. Cada vez que os dados são alterados, os novos dados são enviados para um cliente, se esse cliente é um site ou um dispositivo móvel, ou até mesmo o playground do GraphQL. Ele faz isso usando soquetes da Web para manter uma conexão aberta com o cliente. O que isso vai fazer para o nosso projeto é que nos permitirá subscrever as críticas de filmes. Cada vez que uma nova avaliação for publicada, seremos notificados. Em um aplicativo do mundo real, isso pode ser vinculado a um usuário para informá-lo quando uma nova revisão foi feita em um movimento que eles gostaram, ou até mesmo apenas para exibir uma nova revisão em uma página da Web como eles são postados. O GraphQL-Yoga também vem com suporte para assinaturas, por isso nem precisamos instalar nada extra para começar. Estes são configurados em nosso projeto usando um padrão semelhante às consultas e mutações. Nós configuramos a assinatura na raiz do nosso esquema em nosso arquivo schema.graphql, e também um resolvedor correspondente para cada assinatura que criamos. Então vamos começar no esquema onde configuramos o site de assinatura. Então, logo após Query and Mutation, eu coloquei isso na rota. Então digite Assinatura, abra as chaves em. Aqui, seguimos o mesmo padrão de consultas e mutações, dando a nossa assinatura um nome. Então eu vou dar a isso um nome de revisão, seguido pelo tipo que queremos retornado, que é um tipo de objeto personalizado. Salve este arquivo e, em seguida, sobre os resolvedores, precisamos configurar o objeto de assinatura. Então eu vou fazer isso depois de Query and Mutation. Vamos adicionar isso. Então Subscrição, S maiúsculo, então é nosso objeto, e depois adicione uma vírgula no final. Como sempre, o resolvedor deve ter um nome correspondente. No nosso caso, esta é uma revisão. Em seguida, dentro deste objeto de revisão, usamos um método de assinatura. O método subscribe também leva no pai, o argsm, o contexto e também as informações. Ao trabalhar com assinaturas, usamos o que é chamado de padrão de assinatura de publicação, muitas vezes mostrado para pubsub. editor é o remetente da mensagem e o assinante será a nossa aplicação. Podemos configurar uma nova instância pub-sub importando primeiro isso do módulo de yoga GraphQL, e fazemos isso no index.js. Nós já pegamos o servidor GraphQL do pacote de ioga. Então vamos também pegar PubSub. Então precisamos criar uma nova instância PubSub, que eu vou fazer pouco antes do servidor. Const, vamos observar, e isso vai ser igual a uma nova instância PubSub assim como esta. Isso nos permitirá implementar PubsUp em nossos projetos, e podemos fazer isso adicionando PubSub ao contexto abaixo. Então dentro é objeto de contexto bem na parte inferior, podemos adicionar nossa instância de PubSub, então isso está disponível em todos os resolvedores. Ao ir para o nosso resolvível agora pode terminar isso fora. Dentro do método de assinatura, precisamos retornar algo de PubSub. Então podemos retornar ctx.pubsub. O que queremos retornar é um método Asynciterator. Então pubsub.Asynciterator. Este Asynciterator é responsável por enviar os dados para o cliente de assinatura. Nós assinamos isso adicionando um nome de canal de nossa escolha, que eu vou chamar de minha nova revisão. Então aqui dentro tem uma corda. Adicionamos um nome de canal de nova revisão, R maiúsculo e você pode chamar isso do que quiser. Então agora temos Asynciterator que retornará quaisquer novas avaliações. O próximo passo é ir até a mutação criar revisão logo acima, que é este aqui. Aqui, quando uma nova revisão é criada usando este resolvedor, também podemos publicar esses dados no novo canal de revisão. Fazemos isso novamente acessando PubSub a partir do contexto. Vamos fazer isso antes de retornarmos nossa crítica. Então ctx.pubsub, e então podemos chamar um método em pubsub chamado Publicar. Dentro deste método, primeiro passamos o nome do canal como uma string. Só para coincidir com o nome do canal daqui, vamos usar NewReview. Depois que eles são separados por vírgula, passamos em um objeto contendo os dados que você deseja publicar, que é o nosso objeto de revisão de cima. Então, vamos adicionar um objeto e o nome da revisão, que corresponde a este objeto de revisão apenas aqui. Esta revisão deve corresponder ao tipo de retorno do nosso esquema. Em nosso schema.graphql, se formos para nossa assinatura, aqui estamos retornando um tipo de revisão. Isso é exatamente o que estamos publicando para que as coisas combinem. As assinaturas também podem ser testadas no playground, então vamos para o navegador da web e depois recarregar. Vamos criar uma nova guia para assinatura com uma estrutura semelhante à que já usamos para consultas e mutações. O nome da assinatura é revisão, e vamos retornar um tipo de revisão, incluindo um ID, uma classificação e também o texto da revisão. Se apertarmos o jogo, vemos na parte inferior recebemos uma mensagem de escuta, e ele gira no meio. Isso está ouvindo quaisquer novos dados publicados em nosso canal, que é quando uma nova revisão é feita. Podemos testar isso adicionando uma nova revisão. Então, digamos que o filme desta vez é 2003. O usuário é 1003. Vamos apenas dizer que nova revisão aqui dentro, enviar isso fora e a revisão é criada. Voltar para a nossa assinatura, ótimo, nossa nova revisão agora é mostrada na assinatura. Vamos apenas criar mais uma, sobre 2002, nova revisão 2 enviar isso fora, e nossa segunda revisão está sendo mostrada agora. Também podemos usar as assinaturas para extrair qualquer um dos dados que queremos do servidor, criando canais diferentes. Eles podem ser configurados exatamente da mesma maneira que acabamos de fazer para revisões. 18. Configuração de Prisma: Agora chegamos a uma parte empolgante do curso onde podemos implementar um banco de dados de trabalho real em vez de nossos dados de amostra. Para fazer isso, usaremos um serviço chamado Prisma, que está disponível em prisma.io. Você pode pensar em Prisma como o link entre nossos resolvedores GraphQL e o banco de dados. Ele fica entre nosso banco de dados e o servidor GraphQL criando o link. Ele nos permitirá executar operações CRUD em nosso banco de dados, que possamos criar, ler, atualizar e excluir dados juntamente com trabalhar com dados em tempo real também. Fazemos isso atualizando nossos resolvedores para incluir métodos Prisma para interagir com nosso banco de dados em vez do que estamos fazendo atualmente, que é empurrar e ler de nosso arquivo de dados de amostra. Prisma é compatível com muitos bancos de dados populares, como MySQL, Postgre e MongoDB. Ele também modela nossos dados para que possamos estruturar como nossos dados devem ser vistos. Se você já usou algo como Mangusto antes, ele faz um trabalho semelhante a este. No entanto, o Prisma é mais adaptado para trabalhar com a flexibilidade do GraphQL e até vem com um banco de dados demo hospedado gratuito para experimentar as coisas, e vamos configurar isso em alguns instantes. Para começar, vou instalar o Prisma CLI globalmente a partir do terminal. Vamos voltar ao código VS, dentro deste terminal, podemos executar npm i -g, e este flanco -g irá instalar isso globalmente e queremos instalar o nome do pacote de Prisma e deixar este pull no pacote Prisma do npm. O Prisma CLI é uma ferramenta usada para gerenciar e implantar nossos serviços Prisma, usaremos alguns dos comandos que ele fornece, como o comando init para configurar nossos projetos. Vamos rodar isso agora, então prisma init seguido pelo nome da pasta que você deseja adicionar, todos os nossos arquivos e pastas Prisma dentro do que é chamado de mime Prisma e, em seguida, pressione Enter. Isso acionará nossa inicialização onde podemos escolher o banco de dados que queremos usar, podemos usar um banco de dados existente se já tivermos um, podemos criar um novo banco de dados local usando um contêiner de encaixe, ou eu vou escolher a demonstração servidor, que é um ambiente de desenvolvimento livre hospedado pela Prisma, selecione isso e então nós temos a escolha de regiões, eu vou selecionar o mais próximo de mim, pressione Enter. Podemos selecionar um nome para o nosso serviço, eu quero chamar o meu banco de dados de revisão de filmes, apertar Enter e, em seguida, a fase de desenvolvimento. Em seguida, podemos selecionar o idioma dos clientes Prisma que queremos usar, eu vou estar usando JavaScript, então eu vou selecionar os clientes Prisma JavaScript. O cliente Prisma é uma biblioteca gerada automaticamente que fornece todas as operações que precisamos ao trabalhar com nosso banco de dados e essas operações são baseadas em um modelo de dados, que vamos dar uma olhada em breve. Nós criamos uma pasta chamada Prisma, que está na raiz do nosso diretório aqui, então agora eu vou usar CD para mudar para a pasta Prisma e então nós podemos implantar nosso novo serviço Prisma usando o comando Prisma deploy. Adicionar Prisma implantar no terminal, eu apertei Enter. Dê a isto um momento para correr. Se rolarmos para cima para criar mais espaço, podemos ver nosso serviço foi implantado e também podemos ver que criamos um tipo de usuário e vamos dar uma olhada por que isso é em apenas um momento e, em seguida, rolando para baixo, temos alguns links aqui, Se abrirmos isto, vamos copiar este link, isto irá abrir o playground que está ligado a Prisma e, em seguida, adicionar isto dentro do navegador, isto irá abrir uma nova instância dos playgrounds GraphQL. Mais abaixo, também temos o link para nosso banco de dados, que possamos copiar isso, voltar para o Chrome e então podemos colar isso como uma nova guia. Esta é a interface de usuário para o nosso banco de dados demo, podemos ver no lado esquerdo, temos um tipo de usuário e não temos nenhum registro inserido ainda, então você pode estar se perguntando por que temos apenas este tipo de usuário ou não veem nenhuma referência às nossas críticas ou filmes. Bem, isso é por causa de um arquivo chamado modelo de dados. Se abrirmos a barra lateral, ir para a pasta Prisma que foi criado, temos um arquivo chamado modelo de dados ponto Prisma. Este modelo de dados se parece com o esquema que já temos e Prisma está definido para abrir um tipo de usuário padrão. Este é o arquivo que vamos usar para estruturar todos os nossos tipos que queremos salvar no banco de dados. Este arquivo refletirá como serão nossas tabelas de banco de dados. Uma vez que só temos o tipo de usuário, é por isso que só vemos o tipo de usuário dentro do banco de dados demo. Uma das coisas difíceis de entender ao primeiro olhar para tudo isso é por que temos que criar nossos tipos tanto neste arquivo quanto no esquema dot GraphQL. Bem, há casos em que esses dois arquivos parecerão um pouco diferentes, o modelo de dados, que apenas tem o nosso usuário, irá descrever o que queremos salvar no banco de dados enquanto o esquema irá descrever quais dados estão disponíveis para o cliente usar. Um exemplo de quando esses arquivos terão uma aparência diferente é um tipo de usuário típico. Muitas vezes queremos que um campo de senha para o usuário seja armazenado no banco de dados, mas talvez não queira adicionar um campo de senha em nosso esquema, portanto, expondo isso ao cliente, pois isso pode representar um risco de segurança. Além disso, como nosso modelo de dados é responsável apenas por estruturar e moldar nossos dados, ele também não contém nenhuma das consultas ou mutações que definimos em nosso esquema. Então, apenas uma recapitulação, nosso esquema fornece todas as informações para o nosso front-end ou para os nossos clientes e o modelo de dados reflete tudo o que vemos aqui neste banco de dados. De volta ao nosso projeto, também dentro desta pasta Prisma, temos uma pasta gerada, se abrirmos isso, temos um arquivo dentro chamado Prisma dot js. Se dermos uma olhada dentro, este arquivo contém um monte de código que também foi gerado por Prisma. O cliente Prisma gerou tudo isso com base no tipo de usuário único, que temos em nosso modelo de dados. Você verá, por exemplo, mutações foram configuradas todas com base no usuário, como criar usuário, atualizar usuário e excluir usuário. Agora, todas essas ações estarão disponíveis para que possamos usar nos resolvedores e esse é um dos benefícios reais ao usar o Prisma. Cada vez que adicionamos algo novo ao nosso modelo de dados, precisamos regenerar esse arquivo e veremos como fazer isso em breve. Outro arquivo adicionado quando executamos Prisma init, foi o arquivo Prisma dot yml. Se abrirmos isto, dá mais espaço. Este é um arquivo de configuração Prisma que mantém os pontos finais do banco de dados no topo, que aponta para o nosso banco de dados demo que acabamos de olhar antes. Isso também pode ser usado para os bancos de dados também e, em seguida, abaixo disso , temos a localização do arquivo modelo de dados , que está na mesma pasta, então no final temos a seção gerar, onde declaramos que queremos usar o cliente Prisma baseado em JavaScript para gerar automaticamente o nosso esquema e, finalmente, o local onde este arquivo deve ser salvo. Para trabalhar com este cliente Prisma, precisamos instalar uma biblioteca cliente Prisma, para baixo no terminal, podemos fazer isso a partir do npm, então npm i eo nome do pacote é Prisma-clients-lib. Ele termina define puxa de npm. A peça final de configuração é adicionar Prisma ao nosso contexto. Assim como fizemos com os dados de amostra, isso nos permitirá fazer uso de tudo neste arquivo gerado dentro de nossos resolvedores no arquivo index dot js. Para que isso funcione no topo, precisamos exigir o arquivo gerado automaticamente, que acabamos de olhar e armazená-lo em uma variável chamada Prisma. Então vamos criar uma constante chamada Prisma e, em seguida, precisamos exigir o arquivo gerado automaticamente, que nós olhamos antes, este é em um local de arquivo que é ponto barra prisma barra direta gerada e, em seguida, encaminhar barra cliente Prisma, que é o nome do arquivo. Nós então precisamos adicionar esta variável Prisma no contexto, então, na parte inferior abaixo comentários, nós também podemos incluir Prisma no contexto e que isso nos dará acesso a Prisma de nossos resolvedores e isso é o que vamos ser olhando nos próximos vídeos. 19. Como atualizar nosso Datamodel: Como mencionamos no vídeo anterior, o arquivo de modelo de dados que você tem aberto aqui, vem com um tipo de usuário por padrão. Precisamos agora de obter este modelo de dados para se adequar aos nossos projetos. No momento, os tipos de filme e revisão do usuário, será o mesmo que em nosso esquema. Quando sair para schema.graphql e, em seguida, copiar esses três tipos, copiar a revisão, o filme e também o usuário, e, em seguida, passar para o nosso modelo de dados, e colá-los em. Você também pode remover o usuário que foi fornecido por padrão. Vamos dizer isto. Em seguida, precisamos adicionar as diretivas ID, cada campo ID, então @id e isso vai ser para o nosso campo ID no usuário. O mesmo para o filme e também para a revisão. Esta diretiva ID é algo que precisa adicionar a um campo em cada tipo, ao usar PRISMA. Outra diretiva útil é única, o que é útil para campos como nosso e-mail. Cada entrada de e-mail no banco de dados precisará ser exclusiva. Podemos adicionar isso ao nosso usuário, seu tipo de e-mail pessoal, podemos adicionar @unique. Desde que mudamos nosso modelo de dados, precisamos agora fazer duas coisas. Primeiro, precisamos executar uma implantação PRISMA para atualizar nosso serviço PRISMA, e executamos isso dentro do terminal. Se rolarmos para cima, podemos ver uma lista de todos os diferentes tipos e campos que agora foram criados, alterados ou removidos, juntamente com quaisquer relações entre eles também. Nós também temos a chance de obter nosso link de banco de dados novamente, e isso é algo que você não tem aberto no navegador, adicionando lixo do link na parte inferior. Se agora passarmos por este link no navegador, eu vou recarregar. Agora podemos ver mais, à esquerda, temos um usuário e filme e tipo de revisão. A segunda coisa que precisamos fazer é regenerar nosso arquivo de esquema PRISMA. Esta foi a gerada automaticamente que olhamos antes. Dentro do terminal, execute PRISMA gera e, em seguida, pressione “Enter”. Isso agora atualizará nosso arquivo também gerado com os novos tipos do modelo de dados. Podemos ver isso se abrirmos a barra lateral e, em seguida, entrar em gerado, e, em seguida, nosso esquema PRISMA. Aqui dentro se rolarmos para baixo, vamos um pouco mais longe, podemos ver nosso tipo de filme. Podemos ver muitas referências de filmes à medida que descemos, e se fizermos uma busca por mutação, você verá como são as mutações aqui. Temos o filme criar, atualizar e excluir. mesmo para revisão e também para o tipo de usuário, que já vimos antes. Esses arquivos podem ficar bastante complexos, mas PRISMA tem seu coberto com praticamente qualquer operação, vamos precisar executar em nosso banco de dados. Vamos começar a fazer isso no próximo vídeo, onde começamos a mudar nossos resolvedores para usar um banco de dados real no lugar dos dados de amostra. 20. Writing base: Agora que geramos nossas operações Prisma, agora vamos implementá-las em nossos resolvedores. Isso nos permitirá fazer uso de nosso banco de dados real no lugar das matrizes de dados de amostra sobre o arquivo resolvers.ts. Vou começar com as mutações. Como não temos nada em nosso banco de dados, você esboça uma consulta. Vamos começar com esta mutação de inscrição e podemos começar reconstruindo nosso usuário para usar Prisma. Vamos configurar nosso const de usuário e então desta vez vamos usar o context.prisma. Como colocamos prisma no contexto, podemos acessá-lo dessa maneira. Em seguida, chamamos uma consulta prisma na mutação pelo nome do método. Vou usar a mutação criar usuário. Então. Criar usuário. Como eu sei que é uma mutação de usuário criar? Porque prisma vai tomar nossos tipos, como usuário e fazer ou criar, atualizar e excluir uma versão de cada um. Assim como vimos no último vídeo quando verificamos o esquema prisma. Temos criar, atualizar e excluir versões do nosso filme, revisão e também usuário. Neste esquema prisma gerado, uma coisa que você vai notar é que o prisma não adiciona os argumentos individuais. Por exemplo, criar filme tem uma propriedade de dados e, em seguida, a propriedade de estado aponta para um novo tipo de entrada e desta forma é apenas para manter as coisas um pouco mais organizadas. Nós também podemos procurar por filme, criar entrada, adicionar isso, e podemos ver o tipo de entrada apenas aqui. Isso leva em um ID, um título e qualquer comentário. Voltando aos nossos resolvedores, podemos configurar um objeto para construir nosso usuário. Dentro de criar usuário como em um objeto e, em seguida, podemos adicionar o nome, que é igual a args.name. Use também e-mail, que é args.email. Não precisamos adicionar um ID. Como isso agora é gerado automaticamente pela Prisma, então nós não incutir nada como fizemos acima. Na verdade, podemos realmente remover este const.user uma vez que não precisamos mais disso junto com a ferramenta de método push porque não estamos empurrando para os dados de amostra mais. Definição desta mutação. Vou transformar isso em uma função assíncrona adicionando assíncrono na frente da inscrição. Isso nos permitirá usar aguarde pouco antes de criarmos nosso usuário. Este é o JavaScript padrão e nada específico para o GraphQL. Isso só significa que o código irá pausar ou aguardar até que o usuário de criação tenha terminado. Então, finalmente, no final, retornamos o novo usuário com este lugar conhecido, podemos testar isso irá empurrar para o banco de dados, reiniciando o servidor usando npm start. Podemos começar isso e depois ir ao Chrome, abrir o parquinho. Então vamos para a nossa mutação de inscrição, entramos e recuperamos nossos dados. Então a última coisa a fazer é ir ao nosso banco de dados e recarregar. Isso parece promissor que temos nosso usuário e temos o valor de um. Nós clicamos nisso. Em seguida, vemos o valor que foi inserido no playground gráfico, agora em nosso banco de dados. Se clicarmos nesta linha de usuário sobre o lado direito, vemos todos os campos como usuário. Temos um ID que foi gerado automaticamente, o nome e e-mail. Então, na parte inferior, você tem o campo de comentários e conectaremos o usuário aos comentários muito em breve. Vamos em frente e criar um novo usuário dentro do playground. Então eu vou para esta vez como mini-mouse, mudar o e-mail e, em seguida, enviar isso fora, recarregar. Agora temos dois usuários dentro do nosso banco de dados. Agora temos todos os nossos usuários trabalhando. Queremos fazer o mesmo para criar filme. Se rolarmos para baixo, temos o nosso resolver criar filme apenas aqui, que eu vou converter exatamente como fizemos antes com os usuários. Então, primeiro de tudo, eu vou remover o objeto do filme, cria uma nova constante chamada filme e a sequência ser igual ao contexto superior Prisma. Então vamos chamar um método chamado Criar Filme. Você pode pegar em um objeto. Vamos passar o título, que será igual ao args.title, que passará do playground. Mas eu quero remover é o método push. Quer manter a declaração de retorno em. A última coisa a fazer é marcar isso como assíncrono. Podemos então pausar até que os dados voltem de criar filme. Salve isso, e depois para o playground, atualize e vá para a mutação que é criar filme e enviar isso fora. Eu não vejo nenhum erro, então isso é bom. Adicione também um novo filme aqui e também envie isso também, recarregue a guia do banco de dados. Vemos dois filmes no lado do nosso banco de dados, que acabamos de adicionar. Ótimo. Agora só temos mais uma mutação para atualizar e isso é criar revisão. Voltaremos a este no próximo vídeo e também olharemos para conectar dados, juntamente com também como verificar se um registro existe no banco de dados. 21. Verificar se dados existem e criar conexões: A mutação do CreateView será um pouco mais profunda do que as que já criamos. Isso ocorre por causa de seus links para um usuário e um filme. Antes de criar esta revisão será necessário verificar o usuário eo filme realmente existem no banco de dados. Também precisamos configurar uma conexão com o usuário e também com os filmes, que possamos recuperar os dados que precisamos. Vamos começar com CreateReview no arquivo resolvers.js. CreateReview dos resolvedores, e podemos começar fazendo isso uma função assíncrona. Os clientes Prisma permitem-nos verificar se existe um registo dentro da nossa base de dados fornecendo uma propriedade chamada $exist. Podemos usar isso para passar um ID para o usuário e o filme, para verificar se ambos existem antes de criar a revisão. Vamos fazer isso logo acima do nosso objeto de revisão. Const, vamos começar com o usuário, podemos acessar prisma fora do contexto, então podemos usar o método $exist, para verificar se um usuário da tabela de usuários, eu vou passar em um objeto, verificar se o usuário ID do nosso banco de dados corresponde ao ID do usuário dos args, então args.userId. Logo depois disso nós também vamos fazer o mesmo para o filme. Só temos que fazer constante chamado filme, então podemos acessar prisma do contexto. Podemos usar $exists, mas desta vez em vez do usuário, queremos verificar a tabela de filme dentro do banco de dados. Também queremos verificar se o ID do filme é o mesmo que o fornecido nos args, que é args.Movieid. Bom. Agora temos essas duas variáveis, podemos lançar erros se um ou ambos não existirem. Podemos fazer isso com uma simples declaração if para verificar se o usuário não existe. O ponto de exclamação fará o oposto, então se o usuário retornar false, então executaremos o código dentro daqui. Este código vai ser um simples lance novo Erro com uma mensagem de uma string que vai ser, “usuário não encontrado”. Abaixo deste mais deseja adicionar um segundo if declaração, verifique se nenhum filme existe. Se o filme for falso, podemos lançar um novo Erro, e este vai dizer, “filme não encontrado”. Agora, se vamos logo abaixo desses dois se declarações, se chegarmos a este estágio, o usuário e o filme existem no banco de dados. Podemos ir em frente e construir nossa revisão. const, review, vamos aguardar esta marca de dados do nosso banco de dados, então ctx.prisma, e então podemos usar o método prisma de CreateReView. CreateReview vai levar em um objeto e este objeto de revisão é semelhante ao que criamos logo abaixo ao trabalhar com dados de amostra. Portanto, podemos copiar todas as propriedades deste objeto de revisão. Vou cortar estes fora. Também podemos excluir essas constantes e colar isso dentro de nossa revisão. Nós também podemos remover este método push uma vez que não estamos push em nossos dados de amostra mais, e também a propriedade id do nosso objeto uma vez que este é gerado automaticamente por Prisma. Se salvarmos esse arquivo e, em seguida, vá para o GraphQL Playground. Vamos recarregar isto. Então podemos ir em frente e pegar um MovieID válido e usar id do nosso banco de dados. Para pegar qualquer usuário, podemos copiar o id sobre, adicionar isso em. Então podemos fazer o mesmo com o nosso filme. Qualquer um desses está bem, adicione-o ao MovieID, então podemos executar nossa mutação. Recebemos um erro. Isso porque precisamos estabelecer uma conexão entre o MovieID, fornecido com argumentos, com um filme do banco de dados, e também o mesmo para o usuário. Prisma nos permite fazer isso facilmente usando um conector. Podemos configurar isso em nossos resolvedores dentro de nosso objeto de revisão. Por enquanto eu vou apenas cortar os args.Movieid, configurar as chaves, e então podemos passar em um objeto de conexão. Aqui podemos passar como queremos nos conectar aos nossos filmes, e uma vez que você usa o campo id e, em seguida, corresponde com o MovieID dos args. Também podemos fazer isso para o usuário, podemos cortar o args.UserID, configurar as chaves e nosso objeto de conexão. Desta vez, também queremos nos conectar pelo id. Nós conectamos isso com o id do usuário fornecido nos args, damos isso um salvamento, e então, se reexecutarmos nossa revisão, recarregamos o navegador, e enviamos isso fora. Vamos receber um erro, não é possível ler a publicação de propriedade indefinida, e isso está em CreateReView. Vamos verificar isso. Temos ctx.publish no pubsub que parece bem. Vamos verificar isto no nosso índice. Parece que quando vimos o pubsub algum motivo fora daqui. Vamos salvar isso, recarregar e verificar se está tudo bem. Agora não temos mais esse erro de publicação. Em vez disso, obtemos um não pode retornar null para o campo não-anulável que é review.movie. Esse erro é esperado. Primeiro de tudo, se formos para o nosso banco de dados e depois recarregarmos, vemos que agora temos nossas avaliações que acabamos de adicionar, então a mutação está realmente funcionando. Mas o problema está nos dados da revisão, que estamos recebendo de volta. Isso é porque se formos para o nosso arquivo schema.graphql. Então, se formos até a nossa mutação, aqui podemos ver que temos de volta o tipo de revisão, rolando para baixo para este tipo de revisão, que é apenas aqui. Como já vimos, os campos escalares de ID, string e inteiro retornarão um valor do resolvedor. Ambos os nossos objetos personalizados de filme e também usuário precisarão um resolvedor separado para obter os dados que precisamos no arquivo resolvers. Se deslocarmos para baixo até nosso tipo de exibição, já criamos esses dois resolvedores de revisão de filme e usuário. No entanto, eles ainda estão procurando os dados da amostra em vez do método prisma que precisamos. Em primeiro lugar, podemos alterá-los comentando ou excluindo o código de antes. Então, no lugar, podemos começar a substituir isso pelo equivalente prisma. Podemos retornar ctx.prisma, e o que queremos fazer, que queremos pesquisar através dos comentários. Atualmente, estamos acessando as avaliações do nosso banco de dados. O próximo passo é encontrar a revisão atual combinando id com o dos pais. Passamos isso como um objeto, tanto o id com o parent.id. Agora temos a revisão do nosso banco de dados. Queremos devolver qualquer filme associado a esta revisão. Isso pode ser alcançado encadeando no final uma chamada de método de filme. Bem no final, podemos encadear no método do filme para buscar todos os filmes associados a esta revisão. Podemos fazer isso com qualquer dado relacionado. Nós efetivamente encadear para cobrir os métodos que temos, como usuário, filme e revisão, e, em seguida, filtrar os dados em cada estágio à medida que avançamos, como ele quando o primeiro filtrar as avaliações pelo id e, em seguida, buscar qualquer filme associado com esta revisão. Abaixo deste tipo de revisão também tem uma relação com o usuário, então podemos fazer o mesmo com esses dois. Podemos remover o código de antes. Desta vez vamos retornar um ctx.prisma.review. Isto vai parecer muito parecido. Vamos procurar o id de revisão que corresponde ao id pai. A única diferença desta vez é que vamos procurar um usuário correspondente encadeando no final o método do usuário, salvar este arquivo e, em seguida, voltar para o Playground, recarregue o navegador e, em seguida, envie isso fora, e agora podemos ver nossa revisão foi criada. Se você vai para um banco de dados, esta revisão também é exibida aqui, e podemos clicar sobre isso e verificar nossa visão. Vamos tentar mais uma. Podemos adicionar em um usuário diferente. Copie o ID do usuário cole isso e copie um filme válido. Copie esse id também, adicione isso dentro dos args, e podemos executar isso e agora temos de volta os dados que queremos. Se recarregarmos nosso banco de dados, devemos ver a revisão aqui dentro. Todas as nossas mutações estão agora a trabalhar com a Prisma e a empurrar para a nossa base de dados real. Em seguida, vamos passar para modificar nossas consultas para também trabalhar com nosso novo banco de dados. 22. Como ler dados com Prisma Parte 1: Agora já temos uma pequena experiência de interagir com nosso banco de dados usando Prisma. Atualizar nossas consultas para buscar nossos dados de volta não deve ser um grande problema, já que é muito semelhante. Nossa primeira consulta é para filmes e eu quero marcar isso como assíncrono para que possamos novamente esperar dados de volta de Prisma. Em seguida, podemos novamente acessar Prisma no contexto e selecionar o método filmes. Vamos comentar o código de antes e no lugar podemos criar uma nova constante chamada filmes. Isso também aguarda nossas informações de volta do ctx.prisma, e chamar os métodos de filmes Prisma, puxando todos os filmes do nosso banco de dados, então podemos retornar nossos filmes no final. Eu teria uma declaração de retorno e nós podemos devolver os filmes e ter certeza que isso combina com filmes logo acima disso. Isso é tudo o que precisamos fazer para nossa consulta básica e podemos testar isso no playground. Vamos atualizar o navegador e depois para a guia que é para os filmes. Isto é uma consulta. Podemos refazer isto e depois temos os nossos dois filmes mas desta vez puxado pela Prisma da nossa base de dados. Se quisermos quaisquer dados relacionais, por exemplo, o tipo de filme também tem comentários. Se olharmos para esta propriedade comentários, temos apenas uma matriz vazia. Para isso, precisamos modificar o resolvedor para também buscar as revisões. Volte para o arquivo de resolvedores, role para baixo até a parte inferior. Precisamos reduzir este resolver comentários para o tipo de filme para trabalhar com Prisma assim como fizemos no último vídeo. Vamos comentar o código de antes e, em seguida, no lugar, podemos retornar ctx.prisma. Vamos procurar os nossos filmes, por isso vamos procurar o método do filme. Pressionando em um objeto e vamos procurar o filme que você deseja pelo ID. Bem, vamos combinar o ID do filme com um fornecido de parents.id.Então , assim como olhamos no último vídeo, também podemos encadear no final nosso método de comentários, puxando todas as críticas associadas a este filme em particular. Vamos salvar isso. Agora, se voltarmos a executar a nossa consulta, recarregar o navegador, aperte Enter e agora vemos para cada filme que temos uma matriz de comentários. Desta vez não está vazio. Ele tem todos os comentários que está ligado em nosso banco de dados. Em seguida, temos o resolvedor de usuários. então faça backup para a parte superior do arquivo e, em seguida, vá para os usuários. Nós poderíamos primeiro marcar esta função como assíncrona, puxando comandos nossa instrução return de antes. No lugar podemos configurar uma constante chamada Usuários que vai esperar ctx.prisma. Desta vez quer procurar os usuários e, em seguida, podemos retornar nossos usuários. Assim como antes, isso funciona bem para consultas simples que só retorna tipos escalares. Bem, nossos usuários também têm comentários também para baixo perto da parte inferior do arquivo, precisamos modificar o resolvedor de revisão para o tipo de usuário. Role para baixo até nosso tipo de uso. Temos um resolvedor de críticas. Aqui dentro podemos comentar ou cortar essas linhas de código e então podemos substituir isso por um método Prisma que será semelhante ao que criamos antes. Vamos devolver ctx.prisma. Vamos procurar os usuários, passar em um objeto ou podemos filtrar os usuários pelo ID. A identidade que queremos verificar é a que vive dos pais. Em seguida, para cada usuário, também podemos puxar em quaisquer comentários correspondentes encadeando o método de comentários no final. No parque de diversões, podemos testar isso. Se procurarmos a guia que é a consulta do usuário, pressione recarregar e, em seguida, enviar essa consulta. Em seguida, recuperaremos todos os usuários e as avaliações correspondentes de cada um. Em seguida, temos a consulta comentários. Isso seguirá o mesmo padrão, então no topo dos resolvers podemos marcar isso como assíncrono, comentar as declarações de retorno e, em seguida, podemos obter todas as avaliações da Prisma, então const comentários. Isso vai aguardar nossos dados ctx.prisma.reviews e, em seguida, retornar nossos comentários abaixo. Teste isso no playground, recarregar, até nossa consulta de comentários, envie isso e nossos comentários e agora volte do banco de dados. Observe como desta vez nossos dados relacionais que é o filme assim com o título do filme aqui e ID e também o nome de usuário na parte inferior. Isso tudo parece estar funcionando também. Isso é porque já lidamos com os resolvedores desses casos mais cedo. Fizemos isso nos resolvedores no tipo de revisão. Role para baixo até o tipo de revisão. Temos o usuário e o resolvedor de filmes no lugar. Nós os convertemos para o usuário Prisma mais cedo ao trabalhar com mutações para que eles também agora se resolvam para nossas consultas também. 23. Como ler dados com Prisma Parte 2: Estamos todos feitos com a atualização das consultas existentes, eles agora trabalham com a Prisma. Mas antes de encerrarmos isso, vou criar mais uma consulta. Isso é para obter avaliações de um usuário específico. Se você se sentir confiante, você poderia ir em frente e tentar isso nós mesmos antes de seguir junto comigo. Sua estrutura seguirá o mesmo padrão que as outras consultas apenas aqui. Eu quero chamar minhas revisões de consulta por usuário, que tomará qualquer ID de usuário como seu único argumento. Então você precisa criar um resolvedor correspondente que primeiro verifica se o usuário existe e, em seguida, retorna todas as avaliações para esse determinado usuário. Ok, então vamos começar em nosso esquema adicionando em nossa consulta. Então esse é o esquema. Graftql. Na parte superior com o tipo de consulta. Podemos adicionar comentários por usuário. Isso vai tomar como seu único argumento, o ID do usuário, que irá retornar o tipo de ID. Este é um campo obrigatório, então usamos o ponto de exclamação. Um usuário pode ter várias revisões, então ele vai retornar uma matriz do tipo de revisão. Depois que isso é feito, podemos salvar isso e, em seguida, ir para os resolvers para esta consulta. Resolvedores é.jsfile. Então, após as avaliações, podemos adicionar uma vírgula. Eu também vou fazer isso assíncrono. O nome era comentários por usuário, que vem em segundo lugar, os pais, os args, os contatos e também as informações. Configure nossas chaves. O primeiro passo é verificar se um usuário existe em nosso banco de dados. Vamos criar uma constante chamada usuário existe. Então vamos esperar os dados de volta do ctx dot prisma. Vou usar o método $ símbolo existe para verificar se um usuário existe por um ID específico. Podemos passar em seu ID para o objeto, verificando se este ID é igual ao fornecido por args, que era args dot ID usuário. Em seguida, podemos verificar se o usuário existe em uma instrução condicional. Então, se o usuário não existe, vamos lançar novo erro. Passando uma mensagem de erro como uma string de usuário não encontrada. Na linha abaixo, se chegarmos a este estágio, o usuário existe. Então vá em frente e coloque os comentários. Então comentários const, vamos esperar, ctx.prisma. O primeiro que eu vou fazer é verificar os usuários e filtrá-los para baixo pelo ID fornecido para pesquisar todos os usuários no banco de dados correspondentes ao ID dos args. Então ID do usuário. Em seguida, podemos encadear no final as revisões desse usuário em particular. O passo final é retornar os comentários e, em seguida, testar isso no playground. Recarregue o playground e, em seguida, precisamos criar uma nova guia para criar nossa nova consulta. Esta consulta foi chamada de comentários por usuário, que você vai tomar no ID do usuário. Este ID de usuário precisa ser um ID válido do nosso banco de dados. Então, obviamente, os usuários, podemos selecionar qualquer usuário, copiar o ID, colar isso dentro, dentro das chaves. Precisamos selecionar quais campos queremos voltar. Vamos adicionar o ID, o texto de revisão, a classificação e, em seguida, também o filme ao qual esta crítica está associada. Isso também é um objeto. Então, precisamos passá-lo nas chaves, os campos que queremos voltar, Nossa resposta para adicionar título. Execute esta consulta. Então temos 1, 2, 3 avaliações diferentes, que correspondem a críticas bonitas dentro do nosso banco de dados. Um teste final, se removermos os dígitos do nosso ID de usuário e, em seguida, executamos isso, obtemos nossa mensagem de usuário não encontrado. Grande esperança que você conseguiu tentar isso sozinho. Se não, não se preocupe muito. É tudo uma boa experiência de aprendizagem e isso é tudo agora para nossas consultas usando Prisma. 24. Agradecemos e próximos passos: Parabéns, você chegou ao final deste curso. Se não, este é um curso introdutório. Nós cobrimos bastante terreno e esperamos que você tenha aprendido muito sobre GraphQL e Prisma. Começamos analisando o que é o GraphQL e alguns dos conceitos básicos, como configurar nosso servidor, configurar nossos tipos, consultas e mutações, e também como criar resolvedores. Depois disso, analisamos as relações entre diferentes tipos de resolvedores de conjunto para obter nossos dados relacionais antes de passar para mutações e dados em tempo real usando assinaturas. Uma vez que tivemos tudo isso coberto, passamos para a criação de um banco de dados real e interagindo com ele usando Prisma. Em seguida, convertemos nossos projetos de revisão de filmes para trabalhar com esse banco de dados em vez dos dados de amostra com os quais começamos. Até agora, você deve ter uma boa compreensão do que GraphQL e Prisma são e o que eles podem fazer para o back-end de nossos projetos. Você pode, é claro, deixá-lo lá, se você está apenas fazendo este curso para amostra do GraphQL. Bem, se você quiser levar as coisas mais longe, há alguns caminhos que você pode tomar. Uma maneira óbvia, mas realmente eficaz, de melhorar no GraphQL é simplesmente construir mais projetos. Pegue o que você tem até agora e aplique-o a qualquer projeto que você gosta. Pode ser um hobby ou interesse pessoal, algo relacionado ao trabalho, ou qualquer outra coisa que você possa pensar. Outra coisa que você pode fazer é tornar este projeto seu próprio fazendo alterações. Você pode personalizá-lo alterando o tópico, alterando quais dados você obtém de volta ou até adicionando novos recursos. Se você estiver se sentindo um pouco mais confiante, você pode até adicionar autenticação de usuário com um recurso de login e registro. Você pode adicionar um recurso para excluir ou atualizar avaliações ou qualquer outra coisa que seja bom para você. Outra opção é afastar-se do banco de dados demo Prisma e configurar o seu próprio. Há um link aqui para os documentos Prisma que tem alguns guias sobre isso. Outro grande passo, será criar um front-end para interagir com nossos dados. Nós não cobrimos o front-end neste curso vez que o GraphQL é uma tecnologia relacionada a back-end. Mas isso é certamente algo que vale a pena investigar. Usamos o playground GraphQL para obter nossos dados, mas o GraphQL é compatível com quase todos os front-ends populares, incluindo React, Vue JS, Angular e iOS para citar alguns ou aqui está um link para a documentação do Apollo GraphQL. Apollo GraphQL tem implementações para trabalhar com o GraphQL no servidor, tornando-o uma alternativa ao GraphQL-Yoga, que usamos neste curso. Além disso, o cliente Apollo pode ser usado para criar o lado do cliente do front-end do seu aplicativo. Se você acessar o menu e passar o mouse sobre as opções do cliente aqui em cima, há links para guias para muitas opções populares de front-end. Sinta-se livre para dar uma olhada em alguns desses. A última coisa que quero mostrar a vocês são essas placas GraphSQL Boilerplates. Estas são placas de aquecimento baseadas em Node, Typescript, React ou Vue. Cada um deles tem três níveis de caldeirão de um exemplo simples Olá mundo. Dois recursos avançados usando autenticação e bancos de dados. Estes são realmente úteis para usar como um ponto de partida do projeto ou até mesmo apenas como uma referência. É isso agora para o curso. Espero que você tenha realmente gostado e espero que eu vou vê-lo no curso em breve. 25. Follow na Skillshare: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e ganhe algum conhecimento com isso. Se você gostou desta aula, certifique-se de verificar o resto das minhas aulas aqui sobre compartilhamento de habilidades, e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Obrigado mais uma vez, boa sorte, e espero vê-lo novamente em uma aula futura.