Integração Avançada de GraphQL com Flutter no Back4App

flutter graphql no back4app introdução como você está aqui explorando a documentação do back4app, sabe que o back4app é um backend flexível de baixo código ele permite que você interaja com seu backend de várias maneiras diferentes, da maneira que você preferir se quiser, você pode usar a api rest, ou pode usar diretamente um sdk nativo https //pub dev/packages/parse server sdk para flutter nesta série de tutoriais, vamos explorar o uso da nova e brilhante api graphql com flutter este guia foi escrito por chinmay, um parceiro do back4app https //www back4app com/partners/software development company na hybrowlabs objetivos obter uma visão geral do graphql; entender como graphql e flutter se encaixam juntos; compreender as ferramentas e bibliotecas flutter disponíveis para graphql; compreender a arquitetura geral e os conceitos chave em uma aplicação flutter graphql; pré requisitos exigimos que o usuário tenha algum entendimento básico de dart e flutter; embora não seja necessário, o livro de receitas graphql será útil para entender o especificação graphql do back4app https //www back4app com/docs/parse graphql/graphql getting started o que é graphql graphql é uma arquitetura alternativa ao padrão de api rest o graphql nasceu quando a equipe do facebook estava reconstruindo seus aplicativos nativos do zero e precisava urgentemente otimizar os dados que recebiam do backend enquanto refatoravam seus serviços como um conjunto de recursos, ficaram frustrados porque isso não os levava a lugar nenhum eles deram um passo atrás e repensaram os dados como um gráfico interconectado de objetos em vez de recursos rest isolados isso fez uma grande diferença na arquitetura de seus aplicativos e foi assim que o graphql nasceu desde que o graphql foi lançado em 2015, ele tem ganhado enorme popularidade e atenção, sendo adotado por equipes como twitter, airbnb, atlassian, github por que graphql? na hybrowlabs, um parceiro do back4app https //www back4app com/partners/software development company , construímos aplicativos web e móveis modernos e intensivos em dados adotamos o back4app como nosso serviço de backend preferido devido à sua facilidade de uso, otimização e recursos de definição de esquema que são fornecidos sobre os já incríveis bancos de dados na maior parte do tempo, as aplicações nas quais engenheiramos dados que são exibidos ou manipulados não vêm apenas de uma única classe do back4app em vez disso, esses dados vêm de várias classes a combinação back4app graphql torna muito fácil para nós lidarmos com tais cenários enquanto isso, nos permite reduzir a carga de rede para 2 3 chamadas por carregamento de tela, trazendo apenas os dados que queremos por outro lado, o código em nuvem que definimos é facilmente documentado devido à natureza fortemente tipada do graphql isso torna nosso código manutenível e fácil de entender tldr; aqui estão as vantagens de usar graphql a carga de rede é minimizada consultas eficientes e agrupamento de consultas melhor gerenciamento de código a natureza fortemente tipada traz previsibilidade flutter e back4app graphql é frequentemente muito difícil arquitetar uma solução de backend graphql que combine a flexibilidade dos bancos de dados nosql enquanto preserva a estrutura e organização fornecidas por ter uma estrutura de tipo e esquema do graphql o back4app sempre teve esse design estruturado baseado em esquema e agora o graphql o leva a um novo nível, criando uma api que conhece a semântica do sistema de tipos por outro lado, como sabemos, dart (que é a base do flutter) é uma linguagem fortemente tipada sim, dart é muito particular em relação à segurança de tipos com o graphql, temos um esquema que pode ser reutilizado no lado do cliente isso facilita muito a vida além disso, conhecer o esquema de tipos que pode ser buscado no futuro realmente ajuda, pois nos permite implementar algoritmos avançados de cache e invalidação de consultas sobre esses dados kit de ferramentas flutter para back4app graphql para interagir com nossa api graphql, vamos aproveitar a incrível graphql flutter https //github com/zino app/graphql flutter biblioteca então, vamos entender os recursos que a biblioteca oferece suporte para consultas e mutations todo o esquema definido no painel do back4app é diretamente convertido para os endpoints graphql do back4app e disponível como consultas ou mutations consultas nos permitem obter dados aninhados de várias classes em uma única chamada de api consultas são feitas principalmente para fins de busca de dados, e são armazenadas em cache por back4app graphql permite métodos de consulta ricos, suportando geolocalização, tempo, regex e recursos de busca de texto completo mutations nos permitem fazer uma chamada de api que pode atualizar várias entradas de classe mutations consistem principalmente em criar, editar e excluir dados a seguir está uma classe programinglanguage que eu criei no back4app ao navegar na seção graphql da api do back4app, você verá o console do back4app ilustrado anteriormente este console agora terá todas as mutações e consultas criadas automaticamente! quando eu vou para a seção graphql da api do back4app, veremos o console do back4app ilustrado anteriormente este console agora terá todas as mutações e consultas criadas automaticamente! na imagem acima, usei o graphql do back4app para listar todas as minhas linguagens da classe programminglanguage da mesma forma, podemos criar uma entrada em nossa classe programminglanguage do back4app aproveitando as mutações consulta de polling 1 query( 2 query( 3 options queryoptions( 4 document get all programming languages, // this is the query string you just created 5 pollinterval 10, //setting up polling 6 ), 7 builder (queryresult result) { 8 if (result errors != null) { 9 return text(result errors tostring()); 10 } 11 12 if (result loading) { 13 return text('loading'); 14 } 15 16 // it can be either map or list 17 list programminglanguages = result data\['programminglanguages']; 18 19 return listview\ builder( 20 itemcount programminglanguages length, 21 itembuilder (context, index) { 22 final repository = programminglanguages\[index]; 23 return text(programminglanguages\['name']); 24 }); 25 }, 26 ); para alguns casos de uso, onde as assinaturas podem ser excessivas precisamos atualizar os dados periodicamente, podemos usar o recurso de polling de consulta do cliente isso nos permite buscar os dados mais recentes de forma periódica por exemplo, podemos fazer uma busca de dados em segundo plano a cada 1 minuto cache em memória 1 static future\<queryresult> callquery( 2 {dynamic documentnode, dynamic variables, fetchpolicy fetchpolicy}) { 3 return singleton client query( 4 queryoptions( 5 context singleton context, 6 documentnode documentnode, 7 variables variables, 8 fetchpolicy fetchpolicy ?? fetchpolicy cacheandnetwork, 9 ), 10 ); 11 } o cliente flutter graphql implementa várias maneiras de armazenar em cache os dados, são elas cache enquanto revalida vamos considerar um exemplo simples de busca de uma lista de artigos queremos que os dados da lista sejam armazenados em cache, quando passamos de uma lista para um artigo específico e depois voltamos o mecanismo de cache enquanto revalida implementa esse método de consulta dos dados, isso significa que, mesmo que uma chamada de api esteja sendo feita para buscar os dados, dados antigos são usados para exibir enquanto novos dados estão sendo buscados, quando os novos dados se tornam disponíveis, eles são então mostrados cache only neste método, uma chamada de rede é feita apenas se não houver dados em nosso dispositivo isso é valioso quando combinado com facilidades de sincronização offline para pontos de dados que não vão mudar isso otimiza a rede e economiza recursos network only em casos raros em que você não quer manter o cache de dados, então você pode usar o modo apenas rede da biblioteca flutter graphql sincronização de cache offline a experiência móvel espera que esteja habilitada para offline por padrão fazer isso com flutter e rest api é muito tedioso você tem que armazenar os dados no banco de dados sqlite, verificar se os dados estão presentes ou não, escrever consultas sql para buscar os dados e, em seguida, também fazer chamadas de rede para atualizar os dados isso é muito trabalho, que é totalmente contornado com o uso deste plugin e o suporte offline para consultas vem embutido em nossa aplicação flutter armazenamento de arquivos 1 mutation($files \[upload!]!) { 2 multipleupload(files $files) { 3 id 4 filename 5 mimetype 6 path 7 } 8 } 9 10 import 'package\ http/http dart'; 11 12 // 13 14 string filepath = '/aboslute/path/to/file ext'; 15 final file = await multipartfilefrom(file(filepath)); 16 17 final queryresult r = await graphqlclientclient mutate( 18 mutationoptions( 19 documentnode gql(uploadmutation), 20 variables { 21 'files' \[file], 22 }, 23 ) 24 );gr muitas bibliotecas de servidor graphql não suportam uma instalação de upload de arquivos usando as consultas graphql para fazer o upload de um arquivo, temos que chamar um endpoint rest separado faça o upload do arquivo, obtenha a url e, em seguida, passe a para a api graphql na forma de uma string além disso, temos que manter manualmente os metadados do arquivo, como nome do arquivo, etc back4app tem suporte para padrões de upload de arquivos incorporados na api graphql do back4app quando o arquivo é enviado, ele é carregado como um tipo file de graphql, que corresponde a um file do back4app em graphql automaticamente, armazenamos o arquivo em um armazenamento de arquivos altamente escalável do back4app, respaldado pelo aws s3 resultados otimistas 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) os usuários passaram a esperar uma interface muito envolvente e feedback instantâneo a ui otimista é um princípio de ui/ux que, em essência, diz que não devemos esperar a ação ser concluída em vez disso, mostramos ao usuário que completamos a ação! isso é feito com a suposição de que a ação terá sucesso 99% das vezes se a ação, infelizmente, falhar, mostramos uma mensagem de falha dizendo que não conseguimos completar a ação o flutter graphql vem com suporte embutido para definir as mutações otimistas, o que torna muito mais fácil implementar esse sistema complexo de interação de ui assim, com isso, temos uma base muito bem otimizada para construir aplicações modernas conclusão neste guia, apresentamos algumas vantagens importantes de usar graphql em seu projeto flutter no back4app no próximo guia, vamos colocar as mãos no código e começar configurando nosso cliente graphql flutter para usar a api do back4app