Com uma taxa de satisfação de 94% votada pelos desenvolvedores na última pesquisa State of JS, GraphQL está rapidamente se tornando a escolha de API padrão para desenvolvedores ao consumir dados em um aplicativo da web.
Os ganhos de desempenho prometidos pelo GraphQL têm sido um dos principais motivos para sua maior adoção em muitos aplicativos em diferentes escalas.
Neste tutorial, aprenderemos como consumir dados de uma API GraphQL em um Blazor WebAssembly aplicativo. Embora não consideremos o impacto no desempenho do uso do GraphQL, vamos nos concentrar em como integrar a API GraphQL ao aplicativo.
Primeiros passos
Antes de iniciar este tutorial, certifique-se de ter uma compreensão elementar de C # e ter o SDK do.NET instalado em seu computador local.
O que é GraphQL?
Graph Query Language, popularmente conhecido como GraphQL, é uma tecnologia API que permite a um cliente buscar dados de um servidor de forma declarativa, solicitando os dados exatos necessários por meio de uma consulta.
Ao trabalhar com uma API GraphQL, você pode executar as três operações a seguir em um servidor GraphQL:
Uma consulta, que é semelhante ao verbo GET HTTP em uma API REST que busca dados de um servidor A mutação, que é semelhante aos verbos POST, UPDATE e DELETE HTTP em uma assinatura REST API A, que se conecta ao servidor GraphQL para buscar dados novamente sem reiniciar o co nnection
Neste artigo, executaremos uma consulta e operação de mutação de um aplicativo Blazor em um aplicativo Node.js pré-construído. Isso expõe um endpoint GraphQL quando iniciado.
Para começar, clone o aplicativo GraphQL de seu repositório GitHub usando a CLI Git de seu terminal:
clone git https://github.com/vickywane/blazor-graphql-api.git
Em seguida, execute os comandos abaixo para alterar o diretório atual do terminal no projeto clonado blazor-graphql-api e instale as duas dependências listadas no arquivo package.json dentro do projeto:
# alterar diretório cd blazor-graphql-api # install dependencies npm install
Com as dependências do projeto instalado, execute o comando abaixo para iniciar o aplicativo:
yarn start
O comando acima executa o arquivo index.js no projeto, que usa ApolloServer para executar o servidor GraphQL em seu localhost, tornando-o acessível na porta 4000.
Mantenha o aplicativo GraphQL em execução até que este tutorial seja concluído porque usaremos a API GraphQL em partes posteriores do tutorial.
Trazendo GraphQL para Blazor
Blazor é uma estrutura de código aberto que permite que os desenvolvedores criem interfaces de usuário interativas usando C # aproveitando WebAssembly. Isso permite que um código que não é JavaScript seja executado em um navegador.
Algumas das bibliotecas cliente disponíveis para consumir uma API GraphQL em um aplicativo.NET são:
Graphql-dotnet Batido de morango
Para este artigo , usaremos a biblioteca graphql-dotnet porque ela tem uma configuração mais rápida para começar.
Aplicativo Demo Blazor
Começaremos inicializando um novo aplicativo Blazor com o padrão páginas padronizadas e reescrever a página FetchData.razor para usar dados obtidos de uma API GraphQL.
Execute o comando abaixo em seu terminal local para criar um novo aplicativo Blazor por meio da CLI dotnet:
dotnet new blazorserver-o BlazorApp–no-https
O comando acima cria um novo diretório contendo um aplicativo.NET 5.0 chamado Graphql-blazor com as páginas FetchData, Counter e Index renderizado usando a sintaxe Razor .
Em seguida, adicione as referências do pacote abaixo no novo projeto usando a CLI do dotnet:
# Graphql package dotnet add package Graphql # NewtonsoftJsonSerializer pacote dotnet add package GraphQL.Client.Serializer.Newtonsoft # GraphQLHttpClient pacote dotnet add package GraphQL.Client.Http
Os pacotes instalados acima conectam o aplicativo Blazor a uma API GraphQL.
Através do aberto terminal, mude o diretório de terminal padrão para o diretório Graphql-blazor e inicie o aplicativo em modo de observação executando o comando abaixo:
dotnet watch run
Depois de executar o comando acima, o servidor Blazor é executado em seu localhost na porta 5000.
Neste ponto, podemos visualizar o aplicativo em execução por meio de nosso navegador da web em http://localhost: 5000 . Nosso foco, no entanto, estará na página fetchData em http://localhost: 5000/fetchdata , que exibe uma lista tabular de previsões do tempo.
Este elemento da tabela detalha cinco dias de previsões renderizadas a partir do arquivo fetchData.razor.
Percorrendo o arquivo fetchData.razor, que renderiza a página acima , o método de ciclo de vida OnInitializedAsync busca os dados de previsão simulada do método GetForecastAsync dentro da classe WeatherForecastService no arquivo data/WeatherForecastService.
Seguindo, vamos alterar os dados de previsão do tempo para dados do país para mostrar como usar uma API GraphQL externa.
Para fazer isso, devemos criar um novo w Classe GraphqlService contendo um cliente GraphQL e um método para executar uma consulta GraphQL que busca dados por meio do cliente GraphQL.
Definindo os dados GraphQL
Semelhante ao armazenamento de dados em um aplicativo C # , devemos criar classes com campos e propriedades para armazenar e estruturar os dados retornados de cada operação GraphQL.
Sem passar pelo codebase da API, uma maneira de saber a definição do esquema de uma API GraphQL é introspectando o Esquema da API GraphQL.
A maioria das APIs GraphQL tem um Playground que permite usuários para escrever e executar operações GraphQL na API. A seção Docs dentro do playground também permite que os usuários examinem a API usando um navegador da web.
Abra o GraphiQL Playground para a API GraphQL clonada em seu navegador da web em http://localhost: 4000 .
Executaremos a consulta abaixo para recuperar todos os países existentes no aplicativo GraphQL:
query {name id dateInserted states { id name}}
Clique no botão cinza Reproduzir para executar a consulta acima. Isso retorna um objeto de dados após a conclusão da solicitação.
Clicar no botão verde Documentos no GraphiQL Playground abre a definição do esquema onde podemos examinar as operações GraphQL dentro da API, incluindo seus tipos de retorno.
A imagem abaixo mostra a definição do esquema para a consulta de um único país na API GraphQL clonada que retorna uma matriz de países contendo um id, nome, código, dateInserted e uma matriz de estados aninhados.
Alternar para mutações, executando o literal no bloco de código abaixo do playground GraphiQL, executa uma operação de mutação na API GraphQL para criar um país.
A definição de esquema para o único A mutação CreateCountries dentro da API GraphQL clonada aceita um ID inteiro, junto com um nome e código do tipo string. Isso retorna um objeto contendo um id, nome, código, dateInserted e uma matriz de estados aninhados.
Agora que sabemos o que os tipos de dados retornam da operação de mutação e consulta, podemos prosseguir para criar as classes para estruturá-las no aplicativo Blazor.
Crie um arquivo GraphqlData.cs no diretório de dados. Isso armazena a definição de dados de consulta retornada que busca os países disponíveis.
O arquivo abaixo contém quatro classes que definem a estrutura de dados retornada de uma consulta e operação de mutação:
//./data/GraphqlData.cs usando System.Collections.Generic; namespace graphql_blazor.Data {public class CreateCountry {public int id {get; definir; } nome da string pública {get; definir; } string public dateInserted {get; definir; } código de string público {get; definir; }} public class GraphqlData {public List
Começando pela classe superior, GraphqlData descreve toda a resposta de dados usando a coleção List da namespace genérico com a classe pública de países.
A classe de países contém as propriedades name, id, code, dateInserted, e a classe State contém um nome e uma propriedade de id.
Todas essas classes usam a sintaxe de propriedades automáticas mais curta para definir os acessadores GET/SET em cada classe, e todos eles são marcados como públicos.
Criando um serviço Singleton
Em seguida, devemos criar um serviço Singleton personalizado contendo uma classe para criar o cliente GraphQL. Isso conecta o aplicativo ao aplicativo GraphQL clonado por meio de seu terminal de URL. Os métodos também enviam operações GraphQL por meio da API conectada.
Para começar, crie um arquivo GraphqlService.cs e adicione o conteúdo do bloco de código abaixo:
#./data/GraphqlService.cs usando GraphQL.Client.Serializer.Newtonsoft; usando GraphQL.Client.Http; namespace graphql_blazor.Data {public class GraphqlService {private readonly GraphQL.Client.Http.GraphQLHttpClient _graphqlClient=new GraphQLHttpClient (“http://localhost: 4000”, newtonsoftJsonSerializer ()); }}
Observe que, ao implantar este aplicativo, considere o uso de variáveis de ambiente para armazenar e recuperar o URL do endpoint da API GraphQL em vez de codificá-lo na classe.
Criando uma consulta GraphQL
Com a instância do cliente GraphQL disponível na classe GraphqlService, a próxima etapa é para usar a instância para enviar uma operação de consulta GraphQL.
Para fazer isso, adicione o bloco de código abaixo no arquivo GraphqlService.cs:
//./data/GraphqlService.cs usando GraphQL. Client.Serializer.Newtonsoft; usando GraphQL; usando GraphQL.Client.Http; using System.Threading.Tasks; namespace graphql_blazor.Data {public class GraphqlService {private readonly GraphQL.Client.Http.GraphQLHttpClient _graphqlClient=new GraphQLHttpClient (“http://localhost: 4000″, newtonsoftJsonSerializer ()); private readonly GraphQLRequest _fetchCountriesQuery=new GraphQLRequest {Query=@”query FetchCountries {países {nome id dateInserted code states {id name}}}”, OperationName=”FetchCountries”}; public async Task
Este bloco de código contém um novo campo privado contendo a string de consulta GraphQL e um método assíncrono, FetchCountries, que executa o método SendQueryAsync da classe do cliente GraphQL.
Isso busca os dados do API GraphQL conectada e retorna o resultado.
Criando uma mutação GraphQL
Além da consulta GraphQL, queremos inserir mais dados de país no aplicativo GraphQL. Isso pode ser feito implementando uma mutação na classe GraphqlService.
Adicione o novo método no bloco de código abaixo no arquivo/data/GraphqlService.cs para enviar uma mutação GraphQL por meio da API GraphQL conectada ao aplicativo GraphQL clonado.
Isso adiciona um novo método parametrizado, InsertCountry, na classe GraphqlService:
#./data/GraphqlService.cs using GraphQL.Client.Serializer.Newtonsoft; usando GraphQL; usando GraphQL.Client.Http; using System.Threading.Tasks; public async Tarefa InsertCountry (string countryName, string code) {var createCountryMutationString=new GraphQLRequest {Query=@”mutation insertCountry ($ code: String, $ countryName: String) {CreateCountry (input: {nome: $ countryName code: $ code} ) {id dateInserted code name}}”, OperationName=”insertCountry”, Variáveis =novo {countryName, code}}; esperar _graphqlClient.SendMutationAsync
A assinatura do método InsertCountry contém dois parâmetros de string e, quando executada, os formulários createCountryMutationvariable, contendo as strings de GraphQL para uma mutação com countryName e valores de parâmetro de código.
Por último, o método SendMutationAsync do GraphQL a instância do cliente envia a mutação contida na variável createCountryMutation por meio da API GraphQL conectada.
Testaremos os dois novos métodos adicionados à classe GraphqlService na próxima seção quando reconstruirmos o arquivo clichê fetchData.razor para usar a classe GraphqlService.
Reconstruindo a página FetchData
Até agora, criamos uma classe GraphqlService contendo dois métodos para enviar uma operação de mutação e consulta, respectivamente. Agora, resta a execução desses métodos a partir da página fetchData.
No entanto, devemos primeiro adicionar o serviço GraphqlService personalizado aos serviços configurados dentro do aplicativo antes de injetá-lo no componente fetchData.
Usando seu editor de código, abra o arquivo Startup.cs e adicione a nova classe GraphqlService à lista de serviços padrão existentes no método ConfigureServices na classe Startup:
#./Startup.cs services.AddSingleton
Em seguida, substitua todo o código no arquivo fetchData.razor pelo conteúdo do bloco de código abaixo para redesenhar a página FetchData. Isso nos permite usar os métodos dentro do serviço GraphqlService:
//./pages/fetchData.cs @page”/fetchdata”; @using graphql_blazor.Data; @using System.ComponentModel.DataAnnotations @inject GraphqlService GraphqlOps;
Países disponíveis
Carregando…
} else {
| Nome do país | Código do país | Data inserida | Estados do país |
|---|---|---|---|
| @ item.name | @ item.code | @ item.dateInserted | @ state.name |
}
@code {//dados do estado dos países privados GraphQL.GraphQLResponse
O componente acima foi reprojetado para injetar o serviço GraphqlService por meio da diretiva personalizada @inject.
Imediatamente, o componente FetchData é criado, o método de ciclo de vida OnInitializedAsync executa o método FetchCountryData, que envia um GraphQL consulta em uma solicitação HTTP para o aplicativo GraphQL clonado.
Os dados no resultado da consulta retornado de FetchCountryData são armazenados no estado local countriesData.
Quando a interface do componente é renderizada após o O evento de ciclo de vida OnInitializedAsync é executado, os dados do resultado da consulta, armazenados no estado do componente countriesData, renderizam uma lista tabular dos países retornados da API GraphQL.
Abra a página fetchData em seu navegador local em http://localhost: 5000/fetchdata para ver as novas alterações.
Agora estamos deixado com a inserção de um novo país por meio de uma mutação da página fetchData. Adicione o bloco de código abaixo ao arquivo fetchData.cs:
//./pages/fetchData.cs
Insira um novo país
@code {bool _isLoading; string privada countryName {get; definir; } string privada countryCode {get; definir; } async void HandleCreateCountry () {_isLoading=true; esperar GraphqlOps.InsertCountry (countryName, countryCode); aguardar FetchCountryData (); _isLoading=false; this.StateHasChanged (); }}
A seção create-country no componente fetchData contém dois campos de entrada que são vinculados às propriedades countryName e countryCode, respectivamente.
Depois de preencher os dois campos de entrada, o método HandleCreateCountry executa o método InsertCountry método dentro do serviço personalizado GraphqlService com os valores de entrada de string countryName e countryCode como parâmetros.
Para testar a mutação, digite o nome de um país no campo de texto Nome do país e o código do país correspondente no campo de texto Código do país . Para este tutorial, usaremos “Albania” como o nome do país e “+355” como o código do país.
Clique em Enviar país detalhes botão para enviar a mutação GraphQL que consiste nos valores de entrada dos dois campos de entrada na página fetchData.
Depois que a operação de mutação for executada com êxito, o FetchCountryData método recupera os dados do novo país.
Finalmente, após as duas operações assíncronas na resolução FetchCountryData, o O método StateHasChanged é chamado para notificar manualmente o componente de uma mudança de estado. Isso renderiza novamente o componente para exibir os novos dados.
Conclusão
Neste ponto, todo o aplicativo foi totalmente reconstruído para usar uma API GraphQL. Você pode repetir o processo de criação de novos países usando os campos de entrada para adicionar mais dados.
Para limpar ainda mais o aplicativo, você pode excluir os arquivos WeatherForcast.cs e WeatherForcastService.cs não usados e remover o serviço dos serviços registrados dentro do método ConfigureServices no arquivo Startup.cs.
O aplicativo Blazor inteiro construído neste tutorial foi enviado para este repositório GitHub . Sinta-se à vontade para baixar ou clonar o aplicativo para seu uso pessoal.
