El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com integrar GraphQL en una aplicació Flutter. GraphQL és un llenguatge de consulta per a APIs que permet als clients sol·licitar exactament les dades que necessiten, i res més. Això pot millorar l'eficiència de les aplicacions mòbils, ja que redueix la quantitat de dades transferides i processades.

Objectius

Comprendre què és GraphQL i com funciona.
Configurar una API GraphQL en una aplicació Flutter.
Realitzar consultes i mutacions amb GraphQL.
Gestionar errors i respostes de l'API.

Què és GraphQL?

GraphQL és un llenguatge de consulta per a APIs i un entorn d'execució per a les teves consultes, amb les dades existents. Proporciona una descripció completa i comprensible de les dades de la teva API, permetent als clients sol·licitar exactament el que necessiten i res més.

Avantatges de GraphQL

Sol·licituds eficients: Només es recuperen les dades necessàries.
Tipat fort: Les consultes es validen contra un esquema.
Flexibilitat: Els clients poden definir l'estructura de la resposta.

Configuració de l'Entorn

Instal·lació de les Dependències

Per començar, necessitem afegir les dependències necessàries al nostre projecte Flutter. Utilitzarem el paquet graphql_flutter per facilitar la integració.

Afegiu les següents línies al fitxer pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  graphql_flutter: ^5.0.0

Després, executeu flutter pub get per instal·lar les dependències.

Configuració del Client GraphQL

Primer, configurem el client GraphQL. Crearem un fitxer graphql_config.dart per gestionar la configuració del client.

import 'package:graphql_flutter/graphql_flutter.dart';

class GraphQLConfig {
  static HttpLink httpLink = HttpLink(
    'https://api.example.com/graphql', // URL de la teva API GraphQL
  );

  static ValueNotifier<GraphQLClient> client = ValueNotifier(
    GraphQLClient(
      link: httpLink,
      cache: GraphQLCache(store: InMemoryStore()),
    ),
  );

  static GraphQLClient getClient() {
    return GraphQLClient(
      link: httpLink,
      cache: GraphQLCache(store: InMemoryStore()),
    );
  }
}

Realitzar Consultes

Exemple de Consulta

Crearem una consulta per obtenir una llista d'usuaris. Primer, definim la consulta en una variable.

const String readUsers = """
  query {
    users {
      id
      name
      email
    }
  }
""";

Executar la Consulta

Utilitzarem el widget Query proporcionat per graphql_flutter per executar la consulta i mostrar els resultats.

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'graphql_config.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: GraphQLConfig.client,
      child: MaterialApp(
        home: UserListScreen(),
      ),
    );
  }
}

class UserListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: Query(
        options: QueryOptions(
          document: gql(readUsers),
        ),
        builder: (QueryResult result, { VoidCallback? refetch, FetchMore? fetchMore }) {
          if (result.hasException) {
            return Text(result.exception.toString());
          }

          if (result.isLoading) {
            return Center(child: CircularProgressIndicator());
          }

          List users = result.data!['users'];

          return ListView.builder(
            itemCount: users.length,
            itemBuilder: (context, index) {
              final user = users[index];
              return ListTile(
                title: Text(user['name']),
                subtitle: Text(user['email']),
              );
            },
          );
        },
      ),
    );
  }
}

Realitzar Mutacions

Exemple de Mutació

Crearem una mutació per afegir un nou usuari. Primer, definim la mutació en una variable.

const String addUser = """
  mutation AddUser(\$name: String!, \$email: String!) {
    addUser(name: \$name, email: \$email) {
      id
      name
      email
    }
  }
""";

Executar la Mutació

Utilitzarem el widget Mutation proporcionat per graphql_flutter per executar la mutació.

class AddUserScreen extends StatelessWidget {
  final TextEditingController nameController = TextEditingController();
  final TextEditingController emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add User'),
      ),
      body: Mutation(
        options: MutationOptions(
          document: gql(addUser),
        ),
        builder: (RunMutation runMutation, QueryResult? result) {
          return Column(
            children: [
              TextField(
                controller: nameController,
                decoration: InputDecoration(labelText: 'Name'),
              ),
              TextField(
                controller: emailController,
                decoration: InputDecoration(labelText: 'Email'),
              ),
              ElevatedButton(
                onPressed: () {
                  runMutation({
                    'name': nameController.text,
                    'email': emailController.text,
                  });
                },
                child: Text('Add User'),
              ),
              if (result != null) ...[
                if (result.hasException) Text(result.exception.toString()),
                if (result.isLoading) CircularProgressIndicator(),
                if (result.data != null) Text('User added successfully!'),
              ],
            ],
          );
        },
      ),
    );
  }
}

Gestió d'Errors

És important gestionar els errors que poden sorgir durant les consultes i mutacions. graphql_flutter proporciona informació detallada sobre els errors a través de l'objecte QueryResult.

Exemple de Gestió d'Errors

if (result.hasException) {
  return Text('Error: ${result.exception.toString()}');
}

Exercicis Pràctics

Consulta Avançada: Crea una consulta que obtingui una llista de productes amb els seus preus i descripcions.
Mutació Avançada: Crea una mutació que actualitzi la informació d'un usuari existent.
Gestió d'Errors: Implementa una gestió d'errors més robusta que mostri missatges d'error personalitzats segons el tipus d'error.

Resum

En aquest tema, hem après com integrar GraphQL en una aplicació Flutter. Hem configurat el client GraphQL, realitzat consultes i mutacions, i gestionat errors. GraphQL proporciona una manera eficient i flexible de treballar amb APIs, permetent-nos sol·licitar exactament les dades que necessitem.

Amb aquests coneixements, estàs preparat per començar a utilitzar GraphQL en les teves aplicacions Flutter i aprofitar els seus avantatges per millorar l'eficiència i la flexibilitat de les teves solucions.

Integració de GraphQL

Objectius

Què és GraphQL?

Avantatges de GraphQL

Configuració de l'Entorn

Instal·lació de les Dependències

Configuració del Client GraphQL

Realitzar Consultes

Exemple de Consulta

Executar la Consulta

Realitzar Mutacions

Exemple de Mutació

Executar la Mutació

Gestió d'Errors

Exemple de Gestió d'Errors

Exercicis Pràctics

Resum

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori