Как использовать подписку GraphQL с Flutter?

Я создаю подписку с GraphQL, и мне нужно использовать эту подписку с Flutter, но я не знаю, как это сделать, мне нужно что-то вроде компонента пользовательского интерфейса, который будет привязан к подписке, и он будет будет автоматически обновляться.

Буду признателен за любые отзывы.

какую библиотеку вы используете? ты уже что-то пробовал?

Hadrien Lejard 25.09.2018 15:51

Я не использовал библиотеку, я создал как свою собственную, я создал свои API-вызовы для GraphQL

Joseph Arriaza 25.09.2018 15:55
6
2
3 102
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Можете проверить следующую библиотеку https://github.com/zino-app/graphql-flutter

Я пытался использовать эту библиотеку, но не знаю, где инициализировать socketClient, не могли бы вы мне помочь?

Joseph Arriaza 28.09.2018 20:30

Просто найдите ошибку в этой библиотеке, просто откройте файл subscription.dart, нажав ctrl + щелчок на подписке. В этом файле легко увидеть, что переменная socketClient имеет значение NULL. Поэтому просто определите его в функции initState (), как показано в документации. Перезагрузите ваше приложение. И это работает как шарм. Итак, по сути, вам просто нужно инициализировать эту переменную в файле subscription.dart.

My GraphqlServer запускает подписку с именем getLogs, которая возвращает информацию журнала в следующем формате.

{
  "data": {
    "getLogs": {
      "timeStamp": "18:09:24",
      "logLevel": "DEBUG",
      "file": "logger.py",
      "function": "init",
      "line": "1",
      "message": "Hello from logger.py"
    }
  }
}

Если вы, как и я, хотите напрямую использовать только Клиент GraphQL, следующий пример может помочь.

import 'package:graphql/client.dart';
import 'package:graphql/internal.dart';
import 'package:flutter/material.dart';
import 'dart:async';

class LogPuller extends StatefulWidget {
  static final WebSocketLink _webSocketLink = WebSocketLink(
    url: 'ws://localhost:8000/graphql/',
    config: SocketClientConfig(
      autoReconnect: true,
    ),
  );

  static final Link _link = _webSocketLink;

  @override
  _LogPullerState createState() => _LogPullerState();
}

class _LogPullerState extends State<LogPuller> {
  final GraphQLClient _client = GraphQLClient(
    link: LogPuller._link,
    cache: InMemoryCache(),
  );

  // the subscription query should be of the following format. Note how the 'GetMyLogs' is used as the operation name below.
  final String subscribeQuery = '''
    subscription GetMyLogs{
      getLogs{
        timeStamp
        logLevel
        file
        function
        line
        message
      }
    }
    ''';
  Operation operation;

  Stream<FetchResult> _logStream;

  @override
  void initState() {
    super.initState();
    // note operation name is important. If not provided the stream subscription fails after first pull.
    operation = Operation(document: subscribeQuery, operationName: 'GetMyLogs');
    _logStream = _client.subscribe(operation);
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _logStream,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: Container(
              child: CircularProgressIndicator(
                strokeWidth: 1.0,
              ),
            ),
          );
        }
        if (snapshot.hasData) {
          return Center(
            child: Text(
              snapshot.data.data['getLogs']
                  ['message'], // This will change according to you needs.
            ),
          );
        }
        return Container();
      },
    );
  }
}

Поскольку я использую StreamBuilder для создания виджета, он позаботится о закрытии потока. Если это не ваш случай, метод stream.listen() вернет объект StreamSubscription<FetchResult>, который вы можете вызвать методом cancel(), который может быть выполнен внутри метода dispose() виджета с отслеживанием состояния или любого такого метода для автономного клиента Dart.

Другие вопросы по теме