Guía técnica para configurar Flutter GraphQL con Back4app

configuración de flutter graphql introducción en el último tutorial entendimos los beneficios de usar back4app graphql con flutter en este artículo vamos a configurar la estructura básica para el proyecto y conectarnos al servidor de back4app objetivos configurar el entorno de flutter anatomía de la configuración de flutter graphql conexión de flutter graphql reutilización de la conexión de flutter graphql y patrones requisitos previos requerimos que el usuario tenga un conocimiento básico de dart y flutter; aunque no es necesario, el libro de cocina de graphql será útil para entender los conceptos de graphql 0 configurar la aplicación desde el hub de back4app necesitaremos crear una aplicación, puedes seguir la documentación en https //www back4app com/docs/get started/new parse app https //www back4app com/docs/get started/new parse app usaremos el hub de back4app para configurar las clases necesarias para este tutorial por favor ve a https //www back4app com/database/chinmay/flutter graphql https //www back4app com/database/chinmay/flutter graphql haz clic en conectar a la api ¡selecciona la aplicación recién creada y ya está! 1 configurando flutter configurar flutter es relativamente indoloro seguiremos las instrucciones de configuración en el sitio web oficial de flutter https //flutter dev/docs/get started/install después de esto, crearemos una aplicación flutter simple usando el comando verifica si todo está bien usando el comando flutter doctor flutter doctor , ejecutando la aplicación 2 instalando la biblioteca flutter graphql para implementar este cliente, vamos a usar la biblioteca flutter graphql como se mencionó en el primer artículo ahora vamos a agregar esto a tus paquetes pubspec yaml pubspec yaml 3 crear un proveedor graphql de flutter en graphql no tenemos que trabajar con múltiples puntos finales, solo tenemos un único punto final que se utiliza para consultar los datos de la solicitud y enviamos consultas graphql a ese punto final así que, generalmente, lo que hacemos es crear una instancia del cliente que es responsable de enviar los encabezados apropiados y formatear las consultas según nuestras necesidades crearemos un cliente, para esto necesitamos un enlace (instancia de la clase httplink) y un almacén de caché usaremos httplink httplink como nuestro enlace y optimisticcache para nuestra caché el código se escribiría de la siguiente manera en el main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart escribiremos lo siguiente 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 a back4app usando graphql ve al panel de control de back4app en la opción “consola api” > “consola graphql” anota url de la api id de la aplicación parse id del cliente parse crearemos un nuevo archivo constants dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart en la carpeta lib lib de nuestro proyecto 5 consultando datos nuestro componente estará envuelto por el widget graphqlprovider, que proporcionará los detalles necesarios para el widget necesitaremos proporcionar una instancia del cliente que creamos en el paso 2 usaremos la consola de graphql para escribir nuestra consulta puedes aprender más sobre las consultas de graphql en nuestra sección del libro de cocina de graphql 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 la lista usaremos el listview listview widget para renderizar la lista, en el main dart 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 deberíamos obtener lo siguiente en nuestra pantalla conclusión hemos configurado el cliente flutter graphql y conectado a la api graphql de back4app puedes encontrar el código para lo mismo aquí https //github com/templates back4app/flutter graphql/tree/flutter graphql setup https //github com/templates back4app/flutter graphql/tree/flutter graphql setup