Integración de GraphQL con Flutter y Back4App: Guía Técnica

flutter graphql en back4app introducción dado que estás aquí explorando la documentación de back4app, sabes que back4app es un backend flexible de bajo código te permite interactuar con tu backend de varias maneras diferentes, como a ti te guste si lo deseas, puedes usar la api rest, o puedes usar directamente un sdk nativo https //pub dev/packages/parse server sdk para flutter en esta serie de tutoriales, vamos a explorar el uso de la nueva y brillante api graphql con flutter esta guía fue escrita por chinmay, un socio de back4app https //www back4app com/partners/software development company en hybrowlabs objetivos obtener una visión general de graphql; entender cómo se integran graphql y flutter; entender las herramientas y bibliotecas de flutter disponibles para graphql; entender la arquitectura general y los conceptos clave en una aplicación flutter graphql; 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 el especificación de graphql de back4app ¿qué es graphql? graphql es una arquitectura alternativa al estándar de api rest graphql nació cuando el equipo de facebook estaba reconstruyendo sus aplicaciones nativas desde cero y tenían una gran necesidad de optimizar los datos que recibían del backend mientras estaban refactorizando sus servicios como un conjunto de recursos, se frustraron porque no los estaba llevando a ninguna parte dieron un paso atrás y repensaron los datos como un gráfico interconectado de objetos en lugar de recursos rest aislados esto hizo una gran diferencia en la arquitectura de su aplicación y así es como nació graphql desde que graphql fue lanzado al público en 2015, ha ganado una gran popularidad y atención y ha sido adoptado para su uso en equipos como twitter, airbnb, atlassian, github ¿por qué graphql? en hybrowlabs, un socio de back4app https //www back4app com/partners/software development company , construimos aplicaciones web y móviles modernas e intensivas en datos adoptamos back4app como nuestro servicio de backend preferido debido a su facilidad de uso, optimización y características de definición de esquemas que se proporcionan sobre las ya impresionantes bases de datos la mayoría de las veces, las aplicaciones en las que diseñamos datos que se muestran o manipulan no provienen solo de una única clase de back4app más bien, estos datos provienen de múltiples clases la combinación de back4app y graphql nos facilita mucho abordar tales escenarios mientras tanto, nos permite reducir la huella de red a 2 3 llamadas por carga de pantalla, trayendo solo los datos que queremos por otro lado, el código en la nube que definimos se documenta fácilmente debido a la naturaleza fuertemente tipada de graphql esto hace que nuestro código sea mantenible y fácil de entender tldr; aquí están las ventajas de usar graphql la huella de red se minimiza consultas eficientes y agrupamiento de consultas mejor gestión del código la naturaleza fuertemente tipada aporta predictibilidad flutter y back4app graphql a menudo es muy difícil arquitectar una solución de backend graphql que combine la flexibilidad de las bases de datos nosql mientras se preserva la estructura y organización proporcionadas por tener un tipo y una estructura de esquema de graphql back4app siempre ha tenido este diseño estructurado basado en esquemas y ahora graphql lo lleva a un nivel completamente nuevo al crear una api que conoce la semántica del sistema de tipos por otro lado, como sabemos, dart (en el que se basa flutter) es un lenguaje fuertemente tipado sí, dart es muy particular en cuanto a la seguridad de tipos con graphql tenemos un esquema que se puede reutilizar en el lado del cliente esto facilita mucho la vida además, conocer el esquema de tipos que se puede obtener en el futuro realmente ayuda, ya que nos permite implementar algoritmos avanzados de almacenamiento en caché e invalidación de consultas sobre estos datos kit de herramientas de flutter para back4app graphql para interactuar con nuestra api de graphql aprovecharemos la increíble graphql flutter https //github com/zino app/graphql flutter biblioteca así que entendamos las características que proporciona la biblioteca soporte para consultas y mutaciones todo el esquema definido en el panel de control de back4app se convierte directamente en los puntos finales de graphql de back4app y está disponible como consultas o mutaciones las consultas nos permiten obtener datos anidados de múltiples clases en una sola llamada a la api las consultas se realizan principalmente con el propósito de obtener datos, y se almacenan en caché por back4app graphql permite métodos de consulta ricos, soportando geolocalización, tiempo, regex y características de búsqueda de texto completo las mutaciones nos permiten hacer una llamada a la api que puede actualizar múltiples entradas de clase las mutaciones consisten principalmente en crear, editar y eliminar datos a continuación se muestra una clase programinglanguage que he creado en back4app al navegar en la sección de graphql de la api para back4app, verás la consola de back4app ilustrada anteriormente ¡esta consola ahora tendrá todas las mutaciones y consultas creadas automáticamente! cuando voy a la sección de graphql de la api para back4app, veremos la consola de back4app ilustrada anteriormente ¡esta consola ahora tendrá todas las mutaciones y consultas creadas automáticamente! en la imagen anterior he utilizado back4app graphql para listar todos mis lenguajes de la clase programminglanguage de manera similar, podemos crear una entrada en nuestra clase programminglanguage de back4app aprovechando las mutaciones consulta de sondeo 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 algunos casos de uso, donde las suscripciones pueden ser excesivas necesitamos actualizar los datos periódicamente, podemos usar la función de consulta de sondeo del cliente esto nos permite obtener los últimos datos de manera periódica por ejemplo, podemos hacer una obtención de datos en segundo plano cada 1 minuto caché en memoria 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 } el cliente de flutter graphql implementa varias formas de almacenar en caché los datos, son caché mientras se revalida consideremos un ejemplo simple de obtener una lista de artículos queremos que los datos de la lista se almacenen en caché, cuando pasamos de una lista a un artículo específico y luego de regreso el mecanismo de caché mientras se revalida implementa este método de consulta de datos, esto significa que, aunque se esté realizando una llamada a la api para obtener los datos, se utilizan datos antiguos para mostrar mientras se obtienen nuevos datos; cuando los nuevos datos están disponibles, se muestran solo caché en este método, se realiza una llamada a la red solo si no hay datos en nuestro dispositivo esto es valioso cuando se combina con instalaciones de sincronización fuera de línea para puntos de datos que no van a cambiar esto optimiza la red y ahorra recursos solo red en raras ocasiones, cuando no deseas mantener la caché de datos, puedes usar el modo solo red de la biblioteca flutter graphql sincronización de caché fuera de línea la experiencia móvil espera que esté habilitada para trabajar sin conexión de forma predeterminada hacer esto con flutter y rest api es muy tedioso tienes que almacenar los datos en la base de datos sqlite, verificar si los datos están presentes o no, escribir consultas sql para recuperar los datos y luego también hacer las llamadas de red para actualizar los datos eso es mucho trabajo, que se evita totalmente con el uso de este complemento y el soporte sin conexión para consultas viene integrado en nuestra aplicación flutter almacenamiento de archivos 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 muchas bibliotecas de servidor graphql no admiten una instalación de carga de archivos utilizando las consultas graphql para cargar un archivo, tenemos que llamar a un punto final rest separado carga el archivo, obtén la url, luego pásala a la api de graphql en forma de cadena además, tenemos que mantener manualmente los metadatos del archivo como el nombre del archivo, etc back4app tiene soporte para estándares de carga de archivos respaldados en la api graphql de back4app cuando se carga el archivo, se carga como un tipo file de graphql, que corresponde a un file de back4app en graphql automáticamente, hemos almacenado el archivo en un almacenamiento de archivos de back4app altamente escalable respaldado por aws s3 resultados optimistas 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) los usuarios han llegado a esperar una interfaz de usuario muy atractiva y retroalimentación instantánea la interfaz de usuario optimista es un principio de ui/ux que, en esencia, dice que no debemos esperar a que la acción se complete ¡en su lugar, mostramos retroalimentación al usuario de que hemos completado la acción! esto se hace con la suposición de que la acción tendrá éxito en el 99% de las veces si la acción, desafortunadamente, falla, mostramos un mensaje de error diciendo que no pudimos completar la acción flutter graphql viene con soporte integrado para definir las mutaciones optimistas, lo que hace que sea mucho más fácil implementar este complejo sistema de interacción de ui así, con esto, tenemos una base muy bien optimizada para construir aplicaciones modernas conclusión en esta guía te presentamos algunas ventajas importantes de usar graphql en tu proyecto de flutter en back4app en la próxima guía vamos a poner nuestras manos en el código y comenzar configurando nuestro cliente graphql de flutter para usar la api de back4app