martineli17/.net-graphql-initconfig

Iniciando as configurações para habilitar o uso do GraphQL usando .NET e HotChocolate

GraphQL .NET usando HotChocolate

Pacotes

• HotChocolate.AspNetCore
• HotChocolate.Data

Exemplo

• Neste exemplo foi utilizado o Entity Framework integrado com o Postgres para realizar o armazenamento dos dados

Configuração

Para o servidor GraphQL foi utilizado o pacote HotChocolate. No próprio site deles tem mais informações sobre as possibilidades de configurações: https://chillicream.com/docs/hotchocolate

1. Primeiro é necessário instalar os pacotes necessários

2. Após isso, é necessário iniciar as configurações do servidor

   builder.Services.AddGraphQLServer()
   

3. Feito isso, precisa-se definir as queries. Query é o arquivo responsável por definir quais os dados estarão disponíveis para serem consultados

   • Client Query
   • Payment Query

   Nota-se que as queries tem alguns atributos que permitem habilitar a integração com o EF e também o nome do recurso dispobilizado.

   Após a criação, elas precisam ser registradas para que o servidor consiga disponibilizá-las

   .AddQueryType(q => q.Name("query"))
   .AddType<ClientQueryType>()
   .AddType<PaymentQueryType>();
   

4. Feito isso, como foi utilizado o Entity Framework para persistência de dados, falta a configuração necessária para que a integração do servidor com o EF funcione e trascreva a consulta solicitada via GraphQL para queries de banco de dados.

   Com isso, a solicitação dos dados fica mais flexível para a necessidade do client e não precisa de implementações específicas no back-end.

   .AddProjections() //Permite selecionar os campos
   .AddFiltering() // Permite filtrar os dados
   .AddSorting() // Permite a ordenação dos dados
   

5. No final, a configuração ficou:

   builder.Services
   .AddGraphQLServer()
   .AddProjections()
   .AddFiltering()
   .AddSorting()
   .AddQueryType(q => q.Name("query"))
       .AddType<ClientQueryType>()
       .AddType<PaymentQueryType>();
   

Realizando estas configurações, basta iniciar o servidor e testar

Front-end

Neste exemplo, foi implementado uma aplicação frontend (NextJs) para simular as buscas dos dados por demanda, solicitando somente o necessário para cada ação do usuário.

Service

• Na tela inicial, irá solicitar os clientes e o seu nome

  const query = {
      query: `{
      clients
          (
              skip: ${skip},
              take: ${take},
              order: [{ name: ASC }]
          )
          {
              items {
                  name
                  id
              }
          }
      }
      `
  }
  

• Na opção de detalhes, irá filtrar pelo ID do cliente selecionado e retornar o E-mail e Nome

  const query = {
      query: `{
      clients
          (
              where: {
                  id: {eq: "${idClient}"}
              }
          )
          {
              items {
                  name
                  email
              }
          }
      }
      `
  }
  

• Na opção de pagamentos, irá filtrar pelo ID do cliente selecionado e retornar os pagamentos relacionados a ele

  const query = {
      query: `{
      payments
          (
              where: {
                  clientId: {eq: "${idClient}"}
              }
          )
          {
              items {
                  value
                  paidWhen
              }
          }
      }
      `
  }