Aula sobre Variáveis no GraphQL

Olá pessoal, nesta aula nós vamos falar de variáveis no GraphQL. Então, eu tenho aqui uma query para obter companhia, tá? E tenho uma mutação para adicionar uma companhia. Eu já rodei a mutação e criei essa nova companhia aqui. Se eu rodar o obter companhia, olha aqui, a gente recebe companhia. A note que eu sempre estou mudando a ideia aqui, né? Mas normalmente, do cliente, você não vai escrever diretamente o ID aqui. Você vai passar variáveis de vários locais do seu aplicativo. Então, a maneira para você passar variável para essa query aqui, é assim, olha. Onde você tem query e o nome da query, você adiciona os parênteses aqui, tá? Aí você faz o seguinte. Você vai dizer assim, olha. O dólar, o nome da variável e você tem que dizer o tipo da variável. Depois dos dois pontos. Neste caso, o ID é um int, né? Int. E esse int vai ser requerido. Então, para obrigatório, você adiciona o sinal de exclamação, tá? Porque não pode obter companhia sem o ID, né? Então, é obrigatório esse campo. Aí você vai ter essa variável, tá? Aí você vai no query variables aqui embaixo do graphical para simular a criação das variáveis, tá? Vou abrir um objeto e vou dizer que o ID, em formato JSON, tá certo? Vai ser, por exemplo, 4. Aí, dentro desse cara aqui do campo companhia, em vez de falar 4, você tem que dizer a variável aqui. Mas a variável se chama dólar e ID, tá? Então, a variável, o valor será substituído aqui. Qualquer valor que você passe como query variables aqui. Então, vamos testar. Obter companhia, tá? Então, funcionou direitinho. Vamos olhar aqui no console para ver o que aconteceu. Vou olhar na aba de Network, de rede. E vou rodar de novo. Obter companhia. Deixa eu olhar lá. Eu vou dar uma olhada no pedido HTTP aqui, que foi post. Mas olha só o que é que ele passou como o pedido. Ele passa query, né? A propriedade query com aquela query que a gente escreveu. E ele passa também variables, variáveis, né? Nesse caso, tem um ID quad, tá? Esse valor será substituído aqui, onde ele encontrar esse dólar e ID dentro aqui do campo, do argumento, né? Olha aqui, ó. Então, é isso, como se usa variáveis. Você pode fazer a mesma coisa para adicionar a companhia. Nesse caso, a variável seria para o input, né? Então, vamos aqui, ó. Você vai do lado do computation ter o nome da mutação. Aí, do lado do nome, adiciona as parênteses e fala o nome da variável. Dólar, nesse caso, input, tá? Aí, dois pontos. Agora, tem que indicar o tipo dessa variável. O tipo será, qual é aquele tipo? Companhia input, né? Vamos ver se esse cara parece que eu cliquei lá. Você não acha que tem aqui companhia input. Eu quero que esse campo seja obrigatório, então eu vou adicionar o sinal de exclamação depois do tipo, tá? E com isso, em vez de pegar esse objeto aqui, ó, eu vou recortar e vou falar o nome da variável que é input. Aí, aqui no query variables, eu vou adicionar o input. Eu vou colar e vou mudar para JSON, adicionar as aspas para a propriedade. Nome da propriedade. Aspals for site, tá? Formato JSON aqui. E vamos rodar aqui, ver se dá certo. Vou rodar, adicionar a companhia. E adicionar com ID5, tá? Se você olhar no Chrome, o pedido aqui lá embaixo, tem o nome da operationalame, que é o nome da operação, adicionar a companhia, né? Tá? Essa é o nome da mutation. Tem a query, né? Que é aquela coisa que a gente escreveu. Ah, essa query é, na verdade, parece que botou as duas juntas, mas... Eu só queria saber da mutation, ó. Mas tem a variables, tá? Tem agora input aqui, que a gente já adicionou, tá? Então, voltando aqui, vamos revisar. Para poder usar variáveis, você abre parênteses depois do nome da mutação ou do nome da query, imeditamente depois da palavra chave. Aí você define os parâmetros das variáveis, o nome da variável com dólar, sinal de dólar, seguir dois pontos e o tipo da variável. Se você quiser que o campo seja obrigatório, adicione o sinal de exclamação. Aí, qualquer lugar que você queira usar, substituir o valor dessa variável, você põe o nome da variável, dólar, input, aqui dentro dos argumentos do campo. Aí você usa, no caso do graphical, que é um cliente, você pode usar essa aba aqui de query variables para definir as variáveis, tem que putar em formato JSON com propriedades como o nome da variável, tá? Então, por essa aula é só e até a próxima.