Ambos GraphQL e Flutter introduziram um novo estilo de desenvolvimento de software quando foram lançados pela primeira vez. GraphQL permitiu que os desenvolvedores buscassem dados em sua forma e formato desejados. Flutter tornou possível construir um aplicativo móvel em uma linguagem e compilá-lo cruzado para outras plataformas.
A combinação dessas duas tecnologias revolucionárias abre mais um mundo de possibilidades.
Neste tutorial, vamos demonstrar como usar GraphQL em um aplicativo Flutter, incluindo como fazer uma consulta , faça uma mutação e configure uma assinatura em um aplicativo Flutter usando o plug-in graphql_flutter. Também mostraremos como consumir endpoints GraphQL de um aplicativo Flutter.
Aqui está o que cobriremos:
GraphQL e Flutter O que é grahlql_flutter? Configurando graphql_flutter e GraphQLProvider Consultas Mutações Assinaturas
GraphQL e Flutter
Desenvolvido pelo Facebook em 2012 e lançado ao público em 2015, GraphQL foi projetado para revolucionar a forma como os dados são fornecidos pelo back-end. Com GraphQL, você pode definir a estrutura dos dados que deseja.
Por exemplo, digamos que temos o seguinte modelo de tabela em nosso banco de dados:
Food {name description price chef origin}
Temos um modelo para Alimentos. Os campos representam as propriedades do alimento:
name property é o nome do alimento, description descreve o alimento in toto price representa o preço de venda do chef de alimentos detém o nome do chef que cozinhou a origem do alimento declara que história da comida
Usando REST, podemos buscar alimentos como este:
/GET localhost: 8080/foods [{nome:”Joolof Rice”, descrição:”Uma comida picante”, preço:”$ 50″, chef:”nnamdi”, origin:”West Africa”}]
Como você pode ver, com REST , todas as propriedades de cada alimento são retornadas, quer seja necessário ou não. Podemos precisar apenas usar o nome e o preço propertied em nosso front-end, mas todas as propriedades foram retornadas.
O GraphQL nos ajuda a evitar essa redundância. Com GraphQL, podemos declarar as propriedades que desejamos retornar, como:
query foods {food {name price}}
Estamos informando ao servidor que precisamos apenas das propriedades name e price from the Mesa de comida. Ele nos fornece exatamente como precisamos:
{“data”: [{“name”:”Joolof Rice”,”price”:”$ 50″}]}
O GraphQL é usado por milhares de empresas hoje. Ele tem outros benefícios que o tornam uma escolha ideal, incluindo:
Cache integrado e mecanismo de lote Estrutura de ponto de extremidade único (para que você não precise lidar com vários pontos de extremidade/API) Métodos de paginação integrados
GraphQL é uma tecnologia de back-end, enquanto o Flutter é um SDK de front-end usado para construir aplicativos móveis. Com aplicativos móveis, buscamos os dados exibidos no aplicativo móvel de um back-end. Como GraphQL é um back-end, podemos fazer nosso Flutter buscar dados de um back-end GraphQL.
É muito fácil construir um aplicativo Flutter que busca dados de um back-end GraphQL. Você só precisa fazer uma solicitação HTTP do aplicativo Flutter e, em seguida, usar os dados retornados para configurar a IU e exibi-los.
O novo plugin graphql_flutter fornece APIs e widgets que permitem buscar e usar dados de um back-end GraphQL com facilidade.
O que é graphql_flutter?
O novo plug-in graphql_flutter fornece APIs e widgets que permitem buscar e usar dados de um back-end GraphQL com facilidade.
Como o nome indica, graphql_flutter é um cliente GraphQL para Flutter. Ele exporta widgets e provedores que podem ser usados para buscar dados de um backend GraphQL, incluindo:
HttpLink-Isso é usado para definir o endpoint ou URL do backend GraphQLClient-Esta classe é usada para buscar a consulta/mutação de um endpoint GraphQL e também para se conectar a um servidor GraphQL GraphQLCache-Esta classe é usada para armazenar em cache nosso consultas e mutações . Possui armazenamento de opções onde passamos para ele o tipo de armazenamento em sua operação de cache GraphQLProvider-Este widget envolve todos os widgets graphql_flutter para que eles possam fazer consultas/mutações. O cliente GraphQL a ser usado é passado para este widget. Este cliente é o que este provedor disponibiliza para todos os widgets em sua árvore Consulta-Este widget é usado para fazer uma consulta a um backend GraphQL Mutation-Este widget é usado para fazer uma mutação em um backend GraphQL Assinatura-Este widget é usado para definir up a subscription
Configurando graphql_flutter e GraphQLProvider
Para usar o pacote graphql_flutter, temos que criar um projeto Flutter:
flutter create flutter_graphql cd flutter_graphql
Em seguida, instale o pacote graphql_flutter:
flutter pub add graphql_flutter
O código acima instalará o pacote graphql_flutter. Isso adicionará o pacote graphql_flutter à seção de dependências do seu arquivo pubspec.yaml:
dependencies: graphql_flutter: ^ 5.0.0
Para usar os widgets, temos que importar o pacote como este:
import’package: graphql_flutter/graphql_flutter.dart’;
Em primeiro lugar, antes de começarmos a fazer consultas e mutações em GraphQL, temos que envolver nosso widget raiz com GraphQLProvider. O GraphQLProvider deve receber uma instância GraphQLClient para sua propriedade de cliente.
GrpahQLProvider (cliente: GraphQLClient (…))
O GraphQLClient é fornecido com o URL do servidor GraphQL e um mecanismo de cache.
final httpLink=HttpLink (uri:”http://10.0.2.2:4000/”); ValueNotifier
O URL do servidor GraphQL é criado usando HttpLink. A instância do HttpLink é passada ao GraphQLClient em uma propriedade de link, que informa ao GraphQLClient a URL do terminal GraphQL.
O cache passado ao GraphQLClient informa o mecanismo do cache a ser usado. A instância InMemoryCache usa um banco de dados na memória para persistir ou armazenar caches.
A instância do GraphQLClient é passada para um ValueNotifier. Este ValueNotifer é usado para conter um único valor e tem ouvintes que notificam quando o valor único muda. O graphql flutter usa isso para notificar seus widgets quando os dados de um endpoint GraphQL são alterados, o que ajuda a manter o graphql flutter reativo.
Agora, envolveremos nosso widget MaterialApp com GraphQLProvider:
void main ( ) {runApp (MyApp ()); } class MyApp extends StatelessWidget {//Este widget é a raiz do seu aplicativo. @override Widget build (BuildContext context) {return GraphQLProvider (client: client, child: MaterialApp (title:’GraphQL Demo’, theme: ThemeData (primarySwatch: Colors.blue,), home: MyHomePage (title:’GraphQL Demo’) ,)); }}
Consultas
Para fazer uma consulta usando o pacote graphql_flutter, usaremos o widget Query.
class MyHomePage extends StatelessWidget {@override Widget build (BuildContext) {return Query ( options: QueryOptions (document: gql (readCounters), variables: {‘counterId’: 23,}, pollInterval: Duration (segundos: 10),), builder: (QueryResult result, {VoidCallback refetch, FetchMore fetchMore}) {if ( result.hasException) {return Text (result.exception.toString ());} if (result.isLoading) {return Text (‘Carregando’);}//pode ser Map ou List List counters=result.data [‘contador’]; retornar ListView.builder (itemCount: repositories.length, itemBuilder: (contexto, índice) {texto de retorno (contadores \ [índice \] [‘nome’]); }); },)}}
Aqui, o widget Query inclui o widget ListView, onde renderizaremos a lista de contadores para buscar em nosso servidor GraphQL. Portanto, o widget Consulta deve envolver o widget onde você deseja exibir os dados buscados pelo widget Consulta.
O widget Consulta não deve ser o widget no topo de uma árvore. Ele pode ser colocado em qualquer outro lugar, desde que o widget que fará uso de seus dados esteja embaixo ou envolvido por ele.
Além disso, o widget de consulta tem duas propriedades passadas para ele: opções e construtor.
options
options: QueryOptions (document: gql (readCounters), variables: {‘conuterId’: 23,}, pollInterval: Duration (seconds: 10),),
A propriedade option é onde o a configuração da consulta é passada para o widget Consulta. Esta opção prop é uma instância de QueryOptions. A classe QueryOptions expõe as propriedades que usamos para definir opções para o widget Query.
A propriedade do documento é usada para definir a string de consulta ou para passar a consulta que queremos que o widget Query execute. Aqui, passamos a string readCounters:
final String readCounters=”””query readCounters (\ $ counterId: Int!) {Counter {name id}}”””;
A propriedade variables é para onde as variáveis de consulta são enviadas para o widget Query. Temos’counterId’: 23, aí. Isso será passado no lugar de $ counterId na string de consulta readCounters.
O pollInterval é o intervalo de tempo durante o qual o widget de consulta pesquisará ou atualizará os dados da consulta. O tempo é definido como 10 segundos, portanto, a cada 10 segundos, o widget Query executará solicitações HTTP para atualizar os dados da consulta.
builder
A propriedade builder é uma função. A função é chamada quando o widget Query faz uma solicitação HTTP para o terminal do servidor GraphQL. A função do construtor é chamada pelo widget Consulta com os dados da consulta, uma função que é usada para buscar novamente os dados e uma função que é usada para paginação. Isso é usado para buscar mais dados.
A função do construtor retorna widgets abaixo do widget Consulta. O argumento resultante é uma instância do QueryResult. O QueryResult possui propriedades que podemos usar para saber o estado da consulta e os dados retornados pelo widget Query.
QueryResult.hasException é definido se a consulta encontrar um erro. QueryResult.isLoading é definido se a consulta ainda estiver em andamento. Podemos usar esta propriedade para exibir um progresso da IU para nossos usuários para dizer a eles que algo está a caminho QueryResult.data mantém os dados retornados pelo ponto de extremidade GraphQL
Mutações
Vamos ver como usar o Widget Mutation em graphql_flutter para fazer consultas de mutação.
O widget Mutation é usado assim:
Mutation (options: MutationOptions (document: gql (addCounter), update: (GraphQLDataProxy cache, QueryResult result) {return cache;}, onCompleted: (dynamic resultData) {print (resultData);},), builder: (RunMutation runMutation, QueryResult result,) {return FlatButton (onPressed: ()=> runMutation ({‘counterId’: 21 ,}), filho: Texto (‘Adicionar contador’));},);
Assim como o widget Query, o widget Mutation assume algumas propriedades.
options é uma instância da classe MutationOptions. É aqui que a string de mutação e outras configurações ocorrem. O documento é usado para definir a string de mutação. Aqui, temos uma mutação addCounter passada para o documento. Ele será executado pela atualização do widget Mutation quando quisermos atualizar o cache. A função de atualização é chamada com o cache anterior (cache) e o resultado do resultado da mutação. Qualquer coisa retornada da atualização se torna o novo valor do cache. Aqui, estamos atualizando o cache com base nos resultados em que onCompleted é chamado quando as mutações são chamadas no terminal GraphQL. Em seguida, a função onCompleted é chamada com o construtor de resultados de mutação e é usada para retornar o widget que estará na árvore de widgets de mutação. Esta função é chamada com uma instância RunMutation, runMutation, e uma instância QueryResult, result. runMutation é usado para executar a mutação neste widget Mutation. Sempre que é chamado, o widget Mutattion aciona a mutação. Esta função runMutation recebe as variáveis de mutação como parâmetros. Aqui, o runMutation é chamado com a variável counterId, 21
Agora, quando a mutação do Mutation estiver completa, o construtor é chamado para que o Mutation reconstrua sua árvore. runMutation e o resultado da mutação é passado para a função builder.
Assinaturas
As assinaturas no GraphQL são como um sistema de eventos ouvindo em um WebSocket e chamando uma função quando um evento é emitido no fluxo.
O WebSocket é aberto do cliente para o servidor GraphQL. Sempre que o servidor emite um evento de seu final, o evento é passado para o WebSocket. Portanto, isso é coisa em tempo real.
No Flutter, o plug-in graphql_flutter utiliza WebSockets e stream Dart para abrir e fornecer atualizações em tempo real do servidor.
graphql_flutter tem um widget de assinatura que podemos usar para abrir uma conexão e comunicações em tempo real para um servidor GraphQL.
Vamos ver como podemos usar o widget Subscription para configurar a conexão em tempo real em nosso aplicativo Flutter. Primeiro, definimos nossa string de assinatura:
final counterSubscription=”’subscription counterAdded {counterAdded {name id}}”’;
Esta assinatura nos dará uma atualização em tempo real quando um novo contador for adicionado ao nosso servidor GraphQL.
Assinatura (opções: SubscriptionOptions (documento: gql (counterSubscription),), construtor: (resultado) {if (result.hasException) {return Text (“Ocorreu um erro:”+ result.exception.toString ());} if (result.isLoading) {return Center (child: const CircularProgressIndicator (),);} return ResultAccumulator.appendUniqueEntries ( mais recente: result.data, builder: (context, {results})=>…);}),
Vemos que o widget Subscription tem muitas propriedades:
options contém a configuração para o documento do widget de Assinatura contém o construtor de sequência de assinatura e retorna a árvore de widgets do widget de Assinatura.
A função do construtor é chamada com o resultado da assinatura. O resultado tem algumas propriedades úteis:
result.hasException é definido se o widget Subscription encontrar um erro na pesquisa de atualizações do servidor GraphQL result.isLoading é definido se a pesquisa do servidor estiver em andamento
Temos esta chamada ResultAccumulator.appendUniqueEntries (). De acordo com a página pub.dev do graphql_flutter , ResultAccumulator é um widget auxiliar fornecido para agrupar os resultados da assinatura.
Conclusão
Cobrimos muito neste tutorial Flutter e GraphQL. Começamos apresentando, em poucas palavras, o que é GraphQL e como funciona. Em seguida, apresentamos o graphql_flutter e demonstramos com exemplos como fazer consultas, mutações e assinaturas de um aplicativo Flutter.
