Flutter Hasura集成插件mobidev_hasura的使用

Flutter Hasura集成插件mobidev_hasura的使用

标题

Flutter Hasura集成插件mobidev_hasura的使用

内容

<p>Easily execute Hasura's query and mutations, without the need of any other package.</p>
<h2 class="hash-header" id="features">Features <a href="#features" class="hash-link">#</a></h2>
<ul>
<li>Query</li>
<li>Upsert (mutation)</li>
<li>rawQuery</li>
<li>rawMutation</li>
</ul>
<h2 class="hash-header" id="getting-started">Getting started <a href="#getting-started" class="hash-link">#</a></h2>
<p>Add <strong>mobidev_hasura</strong> to your pubspec.yaml</p>
<p>import the package:</p>
<pre><code>import 'package:mobidev_hasura/mobidev_hasura.dart';
</code></pre>
<h2 class="hash-header" id="usage">Usage <a href="#usage" class="hash-link">#</a></h2>
<pre><code class="language-dart">    var hasura = Hasura(
        endpoint: 'https://myendpoint.com/v11graphql',
        token: 'my jwt token here'
    );

    var result = await hasura.query(table: 'customers', fields: {
      'name',
      'address',
      'phone'
    }, where: {
      'name': {'_eq': 'josh'}
    });

    if (result.isOk) {
      Map&lt;String, dynamic&gt; myRetrievedData = result.body;
      //Do anything with your data      
    }
</code></pre>
<h2 class="hash-header" id="additional-information">Additional information <a href="#additional-information" class="hash-link">#</a></h2>
<p>This is the initial release.</p>
<p>New features will be added soon.</p>

示例代码

import 'package:mobidev_hasura/mobidev_hasura.dart';

void main() async {
  var hasura = Hasura(
      endpoint: 'https://myendpoint.com/v11graphql',
      token: 'my jwt token here');

  var result = await hasura.query(table: 'customers', fields: {
    'name',
    'address',
    'phone'
  }, where: {
    'name': {'_eq': 'josh'}
  });

  if (result.isOk) {
    Map&lt;String, dynamic&gt; myRetrievedData = result.body;
    if(myRetrievedData.isNotEmpty) {
      //Do anything with your data
    }
  }
}

完整示例demo

import 'package:flutter/material.dart';
import 'package:mobidev_hasura/mobidev_hasura.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Hasura Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var hasura = Hasura(
      endpoint: 'https://myendpoint.com/v11graphql',
      token: 'my jwt token here');

  Future<Map<String, dynamic>> fetchCustomerData() async {
    var result = await hasura.query(table: 'customers', fields: {
      'name',
      'address',
      'phone'
    }, where: {
      'name': {'_eq': 'josh'}
    });

    if (result.isOk) {
      return result.body;
    } else {
      print('Error fetching customer data');
      return null;
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fetch Customer Data'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final data = await fetchCustomerData();
            if (data != null && data.isNotEmpty) {
              List<Map<String, dynamic>> retrievedData = data['customers'];
              for (var item in retrievedData) {
                print(item);
              }
            } else {
              print('No data found');
            }
          },
          child: Text('Fetch Data'),
        ),
      ),
    );
  }
}

更多关于Flutter Hasura集成插件mobidev_hasura的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Hasura集成插件mobidev_hasura的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中集成和使用mobidev_hasura插件的示例代码。这个插件可以帮助你与Hasura GraphQL引擎进行交互。

前提条件

  1. 确保你已经有一个Flutter开发环境。
  2. 确保你已经设置好了Hasura GraphQL引擎，并且有一个运行中的Hasura实例。

步骤一：添加依赖

首先，在你的pubspec.yaml文件中添加mobidev_hasura依赖：

dependencies:
  flutter:
    sdk: flutter
  mobidev_hasura: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

步骤二：配置Hasura客户端

在你的Flutter项目中，创建一个Hasura客户端实例。下面是一个示例代码：

import 'package:flutter/material.dart';
import 'package:mobidev_hasura/mobidev_hasura.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hasura Integration'),
        ),
        body: HasuraExample(),
      ),
    );
  }
}

class HasuraExample extends StatefulWidget {
  @override
  _HasuraExampleState createState() => _HasuraExampleState();
}

class _HasuraExampleState extends State<HasuraExample> {
  late HasuraClient hasuraClient;

  @override
  void initState() {
    super.initState();
    // 配置Hasura客户端
    hasuraClient = HasuraClient(
      endpoint: 'https://你的Hasura实例URL.com/v1/graphql', // 替换为你的Hasura实例URL
      adminSecret: '你的admin_secret', // 如果需要admin权限，请提供admin_secret
      headers: {
        'x-hasura-admin-secret': '你的admin_secret', // 或者其他需要的headers
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () async {
          // 调用Hasura查询示例
          await fetchData();
        },
        child: Text('Fetch Data from Hasura'),
      ),
    );
  }

  Future<void> fetchData() async {
    try {
      final query = '''
      query {
        users {
          id
          name
        }
      }
      ''';
      final result = await hasuraClient.query(query: query);
      print(result.data!);
    } catch (e) {
      print('Error fetching data: $e');
    }
  }
}

步骤三：运行应用

确保你的Hasura实例正在运行，并且数据库中有一些用户数据。然后运行你的Flutter应用，点击按钮，你应该能在控制台中看到从Hasura获取的用户数据。

注意事项

  1. 安全性：在实际应用中，避免在客户端代码中硬编码敏感信息，如adminSecret。考虑使用环境变量或安全的存储方式。
  2. 错误处理：示例代码中的错误处理非常基础，在实际应用中，你应该有更完善的错误处理和用户反馈机制。
  3. 依赖管理：确保定期更新你的依赖项，以获取最新的功能和安全修复。

希望这个示例代码能帮助你在Flutter项目中集成和使用mobidev_hasura插件。如果你有其他问题，欢迎继续提问！

回到顶部