Configuração Avançada do GraphQL em Flutter com Back4app

configuração do flutter graphql introdução no último tutorial, entendemos os benefícios de usar o back4app graphql com flutter neste artigo, vamos configurar a estrutura básica para o projeto e conectar ao servidor back4app objetivos configurar o ambiente flutter anatomia da configuração do flutter graphql conexão flutter graphql reutilização e padrões de conexão flutter graphql pré requisitos requeremos 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 os https //www back4app com/docs/parse graphql/graphql getting started 0 configurar o app no back4app hub precisamos criar um app, você pode seguir a documentação em https //www back4app com/docs/get started/new parse app usaremos o back4app hub para configurar as classes necessárias para este tutorial por favor, vá para https //www back4app com/database/chinmay/flutter graphql clique em conectar à api selecione o aplicativo recém criado e então você estará pronto! 1 configurando o flutter configurar o flutter é relativamente indolor vamos seguir as instruções de configuração no https //flutter dev/docs/get started/install depois disso, criaremos um aplicativo flutter simples usando o comando flutter create flutter graphql setup verifique se está tudo ok usando o comando flutter doctor flutter doctor , executando o aplicativo cd flutter graphql setup flutter run 2 instalando a biblioteca flutter graphql para implementar este cliente, vamos usar a biblioteca flutter graphql, conforme mencionado no primeiro artigo agora vamos adicionar isso aos seus pacotes pubspec yaml pubspec yaml dependencies graphql flutter ^3 0 0 3 criar um provedor graphql flutter no graphql, não precisamos trabalhar com múltiplos endpoints, temos apenas um único endpoint que é usado para consultar os dados da requisição e enviamos consultas graphql para esse endpoint então, geralmente o que fazemos é criar uma instância do cliente que é responsável por enviar os cabeçalhos apropriados e formatar as consultas conforme nossa necessidade estaremos criando um cliente, para isso precisamos de um link (instância da classe httplink) e um armazenamento de cache usaremos httplink httplink como nosso link e optimisticcache para nosso cache o código será escrito da seguinte maneira no https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart escreveremos o seguinte 1 final httplink httplink = httplink( 2 uri 'https //parseapi back4app com/graphql', 3 headers { 4 'x parse application id' kparseapplicationid, 5 'x parse client key' kparseclientkey, 6 }, //getheaders() 7 ); 8 9 valuenotifier\<graphqlclient> client = valuenotifier( 10 graphqlclient( 11 cache optimisticcache(dataidfromobject typenamedataidfromobject), 12 link httplink, 13 ), 14 ); 15 4 conectar ao back4app usando o graphql vá para o painel do back4app na opção “api console” > “graphql console” anote url da api id do aplicativo parse id do cliente parse vamos criar um novo arquivo https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart na pasta lib lib do nosso projeto string kparseapplicationid= ""; string kparseclientkey = ""; 5 consultando dados nosso componente será envolto pelo widget graphqlprovider, que fornecerá os detalhes necessários para o widget precisaremos fornecer uma instância do cliente que criamos na etapa 2 usaremos o console graphql para escrever nossa consulta você pode aprender mais sobre consultas graphql na nossa https //www back4app com/docs/parse graphql/graphql getting started 1 import 'package\ graphql flutter/graphql flutter dart'; 2 import 'constants dart'; 3 4 class myhomepagestate extends state\<myhomepage> { 5 string name; 6 string saveformat; 7 string objectid; 8 9 string query = ''' 10 query findlanguages{ 11 languages{ 12 count, 13 edges{ 14 node{ 15 name, 16 saveformat 17 } 18 } 19 } 20 } 21 '''; 22 23 @override 24 widget build(buildcontext context) { 25 return safearea( 26 child scaffold( 27 appbar appbar( 28 title text( 29 'parsing data using graphql', 30 ), 31 ), 32 body query( 33 options queryoptions( 34 documentnode gql(query), 35 ), 36 builder ( 37 queryresult result, { 38 refetch refetch, 39 fetchmore fetchmore, 40 }) { 41 if (result data == null) { //check if data is loading 42 return center( 43 child text( 44 "loading ", 45 style textstyle(fontsize 20 0), 46 )); 47 } 48 //to implement rendering logic 49 }, 50 ), 51 ), 52 ); 53 } 54 } 6 renderizar a lista usaremos o listview listview widget para renderizar a lista, no https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart 1 else { 2 return listview\ builder( 3 itembuilder (buildcontext context, int index) { 4 return listtile( 5 title text(result data\["programminglanguages"]\["edges"]\[index]\["node"]\['name']), 6 trailing text( 7 result data\["programminglanguages"]\["edges"]\[index] 8 \["node"]\['stronglytyped'] ? "strongly typed" "weekly typed" 9 ), 10 ); 11 }, 12 itemcount result data\["programminglanguages"]\["edges"] length, 13 ); 14 } 15 devemos obter o seguinte na nossa tela conclusão configuramos o cliente flutter graphql e conectamos à api graphql do back4app você pode encontrar o código para o mesmo aqui https //github com/templates back4app/flutter graphql/tree/flutter graphql setup