{"id":448,"date":"2022-10-29T18:46:02","date_gmt":"2022-10-29T10:46:02","guid":{"rendered":"https:\/\/blog.osvlabs.com\/?p=448"},"modified":"2022-10-29T18:46:02","modified_gmt":"2022-10-29T10:46:02","slug":"flutter-%e4%b8%ad%e4%bd%bf%e7%94%a8-graphql-graphql_flutter","status":"publish","type":"post","link":"https:\/\/blog.osvlabs.com\/?p=448","title":{"rendered":"Flutter \u4e2d\u4f7f\u7528 GraphQL (graphql_flutter)"},"content":{"rendered":"

Flutter \u4e2d\u4f7f\u7528 GraphQL (graphql_flutter)<\/h1>\n

\u5b89\u88c5<\/h2>\n

\u8fd9\u91cc\u4f7f\u7528 graphql_flutter 5.1.0<\/a>
\nflutter pub add graphql_flutter<\/code><\/p>\n

\n

\u7248\u672c\u53d8\u5316\u633a\u5927\uff0c\u6240\u4ee5\u8fd9\u91cc\u7528\u6700\u65b0\u7684 5.1.0<\/p>\n<\/blockquote>\n

\u4f7f\u7528<\/h2>\n

\u5728 Flutter \u4e2d\u4f7f\u7528 GraphQL<\/a> \u8ddf\u4f7f\u7528 Restful API \u533a\u522b\u5f88\u5927\uff0cgraphql_flutter \u662f\u7528 Widget \u7684\u65b9\u5f0f\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528 flutter_hooks<\/a> \u7684\u65b9\u5f0f\uff0c\u8fd9\u91cc\u4ecb\u7ecd\u5e38\u89c4 Widget Query \u548c Mutation \u65b9\u5f0f<\/p>\n

    \n
  1. \u521b\u5efa Client<\/li>\n<\/ol>\n
    import 'package:graphql_flutter\/graphql_flutter.dart';\nimport 'package:flutter\/material.dart';\n\nValueNotifier<GraphQLClient> clientFor({\n  @required String uri,\n  String subscriptionUri,\n}) {\n  Link httpLink = HttpLink(\n    uri,\n    \/\/ TODO: add headers here\n    defaultHeaders: {\n      'date': DateTime.now().toString(),\n      'content-type': 'application\/json; charset=utf-8',\n    },\n  );\n  if (subscriptionUri != null) {\n    final WebSocketLink websocketLink = WebSocketLink(\n      subscriptionUri,\n    );\n    httpLink = Link.split((request) => request.isSubscription, websocketLink, httpLink);\n  }\n\n  final AuthLink authLink = AuthLink(\n    getToken: () => 'Bearer ${your_token}',\n  );\n  final Link link = authLink.concat(httpLink);\n  return ValueNotifier<GraphQLClient>(\n    GraphQLClient(\n      cache: GraphQLCache(store: HiveStore()),\n      link: link,\n    ),\n  );\n}<\/code><\/pre>\n
      \n
    1. \u521b\u5efa Provider<\/li>\n<\/ol>\n
      import 'package:flutter\/material.dart';\nimport 'package:graphql_flutter\/graphql_flutter.dart';\nimport 'package:xxxx\/graphql_provider.dart';\n\n\/\/\/ Wraps the root application with the `graphql_flutter` client.\n\/\/\/ We use the cache for all state management.\nclass ClientProvider extends StatelessWidget {\n  ClientProvider({\n    @required this.child,\n    @required String uri,\n    String subscriptionUri,\n  }) : client = clientFor(\n          uri: uri,\n          subscriptionUri: subscriptionUri,\n        );\n\n  final Widget child;\n  final ValueNotifier<GraphQLClient> client;\n\n  @override\n  Widget build(BuildContext context) {\n    return GraphQLProvider(\n      client: client,\n      child: child,\n    );\n  }\n}<\/code><\/pre>\n
        \n
      1. \u5728 main.dart<\/code> \u91cc runApp(App());<\/code> \u524d\u52a0\u5165await initHiveForFlutter(); \/\/ \u7f13\u5b58\u7528<\/code><\/li>\n
      2. \u5728 app.dart<\/code> \u91cc<\/li>\n<\/ol>\n
        return Builder(\n      builder: (BuildContext context) {\n        return ClientProvider(\n          child: buildApp(context),\n          uri: serverUrl,\n        );\n      },\n    )<\/code><\/pre>\n
          \n
        1. \u8bf7\u6c42<\/strong>
          \n\u8fd9\u91cc\u548c\u5e73\u5e38\u4f7f\u7528\u7684 Restful API \u6709\u5f88\u5927\u7684\u533a\u522b\uff0c \u5728\u9700\u8981\u53d1\u9001\u8bf7\u6c42\u7684\u5730\u65b9(\u6bd4\u5982 Button) \u4e0a<\/li>\n<\/ol>\n
          Mutation(\n                            options: MutationOptions(\n                              document: gql(r'''\n                  mutation ($phoneNumber: String!) {\n                  sendVerificationCode(phoneNumber: $phoneNumber) {\n                    ... on ErrorResult {\n                      errorCode\n                      message\n                    }\n                    ... on Other {\n                    success\n                    status\n                   result\n                  }\n                    __name\n                  }\n                }\n        '''),\n                              onCompleted: (dynamic resultData) {\n\n                                print(resultData);\n\n                              },\n                            ),\n                            builder: (\n                              RunMutation runMutation,\n                              QueryResult result,\n                            ) {\n\n                              if (result.hasException) {\n                                print(result.exception);\n\n                              }\n                              return Button(\n                                  onPressed: _canClick != true\n                                      ? null\n                                      : () {\n                                          runMutation({'phoneNumber': '123456789'});\n                                        },\n                                  borderRadius: BorderRadius.circular(8),\n                                  width: 182,\n                                  height: 40,\n                                  text: 'Button,\n                                  fontSize: 15,\n                                  weight: FontWeight.w600,\n                                  textColor: Colors.white,\n                                  color: style.primaryColor);\n                            },\n                          ),<\/code><\/pre>\n
          \n
          onCompleted<\/code> \u91cc\u8fd4\u56de\u7684\u662f\u63a5\u53e3\u6b63\u5e38\u8fd4\u56de\u7684\u4fe1\u606f
          \nrunMutation<\/code> \u5c31\u662f\u53d1\u9001\u8bf7\u6c42, runMutation({\u53c2\u6570: value})<\/code>
          \ndocument<\/code> \u662f\u9700\u8981\u53d1\u9001\u7684 GraphQL<\/code>
          \nQuery<\/code> \u7684\u548c Mutations<\/code> \u7c7b\u4f3c\uff0c\u628a Mutations<\/code> \u6539\u6210 Query<\/code><\/p>\n<\/blockquote>\n
          \u7ed3\u5c3e<\/h2>\n
          \u57fa\u7840\u7684\u7b80\u5355\u4f7f\u7528\u5c31\u5230\u8fd9\u91cc\u4e86\uff0c\u5982\u679c\u6709\u66f4\u597d\u7684\u65b9\u6cd5\u6216\u8005\u6df1\u5165\u7684\u7528\u6cd5\uff0c\u6b22\u8fce\u5206\u4eab\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
          Flutter \u4e2d\u4f7f\u7528 GraphQL (graphql_flutter) \u5b89\u88c5 \u8fd9\u91cc\u4f7f\u7528 graphql_flutter 5.1.0 flutter pub add graphql_flutter \u2026<\/p>\n","protected":false},"author":4,"featured_media":250,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":5}},"_links":{"self":[{"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/posts\/448"}],"collection":[{"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=448"}],"version-history":[{"count":1,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/posts\/448\/revisions"}],"predecessor-version":[{"id":449,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/posts\/448\/revisions\/449"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/media\/250"}],"wp:attachment":[{"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}