{"id":47598,"date":"2023-10-23T12:40:24","date_gmt":"2023-09-03T00:38:51","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/"},"modified":"2024-05-04T05:36:56","modified_gmt":"2024-05-03T21:36:56","slug":"%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/","title":{"rendered":"\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528Flutter\u548cGraphQL"},"content":{"rendered":"<h2>\u9996\u5148<\/h2>\n<p>\u4f60\u4f7f\u7528\u8fc7GraphQL\u5417\uff1f<br \/>\n\u5728\u6211\u4e2a\u4eba\u5236\u4f5c\u670d\u52a1\u65f6\uff0c\u6211\u559c\u6b22\u4f7f\u7528GraphQL\u3002\u6211\u7279\u522b\u559c\u6b22\u4f7f\u7528GraphQL\u7684\u4e24\u4e2a\u597d\u5904\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30ec\u30b9\u30dd\u30f3\u30b9\u306e\u30c7\u30fc\u30bf\u578b\u304c\u306f\u3063\u304d\u308a\u3068\u5206\u304b\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u547c\u3073\u51fa\u3057\u5074\u3067\u30c7\u30fc\u30bf\u69cb\u9020\u306e\u3069\u3053\u307e\u3067\u53d6\u5f97\u3059\u308b\u304b\u6c7a\u3081\u3089\u308c\u308b<\/ul>\n<p>\u6211\u7ecf\u5e38\u770b\u5230\u4f7f\u7528TypeScript\u7b49\u8bed\u8a00\u7f16\u5199\u7684GraphQL\u793a\u4f8b\u4ee3\u7801\uff0c\u4f46\u662f\u5f88\u5c11\u770b\u5230\u4f7f\u7528Dart\u7f16\u5199\u7684GraphQL\u4ee3\u7801\uff0c\u56e0\u6b64\u6211\u5e0c\u671b\u80fd\u591f\u4ecb\u7ecd\u4e00\u4e9b\u793a\u4f8b\u4ee3\u7801\u6765\u4f20\u8fbeGraphQL\u7684\u4f18\u70b9\u3002<\/p>\n<p>\u5982\u679c\u4f60\u89c9\u5f97\u5f88\u4e0d\u9519\uff0c\u6211\u5728\u6587\u7ae0\u4e2d\u51c6\u5907\u4e86\u793a\u4f8b\u4ee3\u7801\uff0c\u5e0c\u671b\u4f60\u80fd\u8bd5\u7740\u8fd0\u884c\u4e00\u4e0b\u3002<\/p>\n<h2>\u7b80\u8ff0<\/h2>\n<p>\u56e0\u4e3a\u6709\u4eba\u63d0\u4f9b\u4e86\u4e00\u4e2a\u53ef\u4ee5\u83b7\u53d6\u5230 \u5217\u8868\u7684 GraphQL \u670d\u52a1\u5668\uff0c<br \/>\n\u6240\u4ee5\u6211\u4f7f\u7528\u5b83\u6765\u5728 Flutter \u4e0a\u521b\u5efa\u4e86\u4e00\u4e2a\u663e\u793a \u5217\u8868\u7684\u793a\u4f8b\u4ee3\u7801\u3002<br \/>\n\u901a\u8fc7\u89c2\u5bdf\u4e0a\u8ff0\u4ee3\u7801\u7684\u521b\u5efa\u8fc7\u7a0b\uff0c\u6211\u5c06\u4ecb\u7ecd\u5982\u4f55\u5728 Flutter \u4e2d\u4f7f\u7528 GraphQL\u3002<\/p>\n<p>&nbsp;<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8023913a08637a6a8d28\/8-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2021-12-13 0.14.32.png\" \/><\/div>\n<p>&nbsp;<\/p>\n<h2>\u8fd9\u4e2a\u9879\u76ee\u7684\u76ee\u6807\u4eba\u7fa4\u662f\u4ec0\u4e48\u6837\u7684\u4eba\uff1f<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">GraphQL\u306f\u3088\u304f\u805e\u304f\u3051\u3069\u307e\u3060\u4f7f\u3063\u305f\u3053\u3068\u306f\u306a\u3044\u4eba<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Flutter\u4ee5\u5916\u3067\u306fGraphQL\u3092\u4f7f\u3063\u305f\u3053\u3068\u304c\u3042\u308b\u3051\u3069Flutter\u3067\u306e\u4f7f\u3044\u65b9\u304c\u308f\u304b\u3089\u306a\u3044\u4eba<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">Flutter\u3067GraphQL\u3092\u4f7f\u3063\u3066\u307f\u305f\u304c\u3001\u578b\u304c\u306f\u3063\u304d\u308a\u3057\u3066\u3044\u308b\u306a\u3069\u306e\u9577\u6240\u3092\u3046\u307e\u304f\u6d3b\u304b\u305b\u306a\u304b\u3063\u305f\u4eba<\/ul>\n<h2>\u5c1d\u8bd5\u4f7f\u7528GraphQL\u4f53\u9a8c\u4e00\u4e0b<\/h2>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8023913a08637a6a8d28\/13-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2021-12-13 0.31.32.png\" \/><\/div>\n<p>\u5f53\u4f60\u6253\u5f00\u9875\u9762\u65f6\uff0c\u5927\u81f4\u53ef\u89c1<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30af\u30a8\u30ea\u3092\u66f8\u304f\u3068\u3053\u308d<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u5b9f\u884c\u7d50\u679c<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u5404\u30c7\u30fc\u30bf\u306e\u578b\u7b49\u306e\u8aac\u660e<\/ul>\n<p>\u5728GraphQL\u670d\u52a1\u5668\u4e2d\uff0c\u63d0\u4f9b\u8fd9\u6837\u7684\u64ad\u653e\u73af\u5883\u662f\u975e\u5e38\u4ee4\u4eba\u9ad8\u5174\u7684\u3002<\/p>\n<p>\u56e0\u4e3a\u88ab\u8981\u6c42\u5728\u8bf4\u660e\u4e2d\u4f20\u9012\u53c2\u6570first\uff08\u6bcf\u6b21\u60f3\u8981\u83b7\u53d6\u7684\u6570\u636e\u6570\u91cf\uff09\uff0c\u6240\u4ee5\u6211\u5199\u4e86\u4ee5\u4e0b\u67e5\u8be2\uff0c\u6210\u529f\u83b7\u53d6\u5230\u4e8610\u4e2a\u5b9d\u53ef\u68a6\u7684\u4fe1\u606f\u3002<br \/>\n\u73b0\u5728\u6211\u4eec\u5c06\u6839\u636e\u8fd9\u4e2a\u67e5\u8be2\u51c6\u5907\u4eceFlutter\u8c03\u7528GraphQL\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">{<\/span>\r\n  <span class=\"n\">pokemons<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"n\">first<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span>\r\n  <span class=\"p\">){<\/span>\r\n    <span class=\"n\">name<\/span>\r\n    <span class=\"n\">image<\/span>\r\n    <span class=\"n\">types<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u5728Flutter\u4e2d\u5b89\u88c5GraphQL\u5e93<\/h2>\n<p>\u8fd9\u6b21\u6211\u4eec\u5c06\u4f7f\u7528\u540d\u4e3aartemis\u7684\u5305\u6765\u521b\u5efa\u6837\u4f8b\u4ee3\u7801\uff0c\u539f\u56e0\u662f\u6211\u4eec\u4e4b\u524d\u6709\u4f7f\u7528\u8fc7\u5b83\u3002<\/p>\n<p>\u7531\u4e8e\u8fd9\u4e2a\u5305\u5b58\u5728\u7f13\u5b58\u4e0d\u8d77\u4f5c\u7528\u7b49\u7f3a\u70b9\uff0c\u56e0\u6b64\u5728\u9009\u62e9\u5728\u81ea\u5df1\u7684\u9879\u76ee\u4e2d\u91c7\u7528\u65f6\uff0c\u6211\u4eec\u5efa\u8bae\u8003\u8651\u4f7f\u7528ferry\u7b49\u5176\u4ed6\u7684\u5305\u3002<\/p>\n<p>\u963f\u5c14\u5fd2\u5f25\u65af\u4e3b\u8981\u7531\u4ee5\u4e0b\u4e24\u4e2a\u90e8\u5206\u7ec4\u6210\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u4f7f\u7528\u3059\u308bGraphQL\u30b5\u30fc\u30d0\u30fc\u306eSDL(\u578b\u5b9a\u7fa9\u306a\u3069\u304c\u66f8\u304b\u308c\u305f\u30d5\u30a1\u30a4\u30eb)\u3068\u81ea\u5206\u304c\u53e9\u304d\u305f\u3044\u30af\u30a8\u30ea\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u3044\u611f\u3058\u306eDart\u30b3\u30fc\u30c9\u3092\u81ea\u52d5\u751f\u6210\u3057\u3066\u304f\u308c\u308b\u6a5f\u80fd<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u4e0a\u8a18\u3067\u81ea\u52d5\u751f\u6210\u3057\u305f\u30b3\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066GraphQL\u30b5\u30fc\u30d0\u30fc\u3092\u53e9\u3044\u3066\u304f\u308c\u308bClient\u6a5f\u80fd<\/ul>\n<p>\u56e0\u6b64\uff0c\u9700\u8981\u5c06\u4e0e\u81ea\u52a8\u751f\u6210\u76f8\u5173\u7684\u5305\u548c\u4e0e\u5ba2\u6237\u7aef\u76f8\u5173\u7684\u5305\u653e\u5165\u5176\u4e2d\u3002<br \/>\n\u7136\u540e\uff0c\u5728pubspec.yaml\u4e2d\u6dfb\u52a0\u5b83\u4eec\uff0c\u5e76\u8fd0\u884cflutter pub get\u3002<br \/>\n\uff08\u57282021\/12\/12\uff0cflutter\u7248\u672c2.5.3\u4e2d\u6b63\u5e38\u5de5\u4f5c\u3002\uff09<\/p>\n<pre class=\"post-pre\"><code><span class=\"c1\"># dependencies\u306b\u306fClient\u6a5f\u80fd\u306b\u95a2\u3059\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u5165\u308c\u3066\u307e\u3059<\/span>\r\n<span class=\"na\">dependencies<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"na\">artemis<\/span><span class=\"pi\">:<\/span> <span class=\"s\">^7.2.6-beta<\/span>\r\n  <span class=\"na\">equatable<\/span><span class=\"pi\">:<\/span> <span class=\"s\">^2.0.3<\/span>\r\n  <span class=\"na\">gql<\/span><span class=\"pi\">:<\/span> <span class=\"s\">^0.13.1-alpha<\/span>\r\n  <span class=\"c1\"># 2021\/12\/12\u306b\u307e\u3063\u3055\u3089\u306a\u72b6\u614b\u3067pub get\u3059\u308b\u3068\u3053\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5225\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u30a8\u30e9\u30fc\u304c\u51fa\u305f\u306e\u3067\u4e00\u65e6\u3053\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u56fa\u5b9a<\/span>\r\n  <span class=\"na\">gql_exec<\/span><span class=\"pi\">:<\/span> <span class=\"s\">^0.3.1-alpha+1635149947799<\/span>\r\n  <span class=\"na\">json_annotation<\/span><span class=\"pi\">:<\/span> <span class=\"s\">^4.3.0<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"c1\"># dev_dependencies\u306b\u306f\u30b3\u30fc\u30c9\u81ea\u52d5\u751f\u6210\u6a5f\u80fd\u306b\u95a2\u3059\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u5165\u308c\u3066\u307e\u3059<\/span>\r\n<span class=\"na\">dev_dependencies<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"na\">build_runner<\/span><span class=\"pi\">:<\/span> <span class=\"s\">^2.1.4<\/span>\r\n  <span class=\"na\">json_serializable<\/span><span class=\"pi\">:<\/span> <span class=\"s\">^6.0.1<\/span>\r\n<\/code><\/pre>\n<h2>\u5c1d\u8bd5\u4f7f\u7528Flutter\u6765\u4f7f\u7528GraphQL<\/h2>\n<p>\u9996\u5148\uff0c\u6211\u4eec\u4eceGraphQL\u670d\u52a1\u5668\u7684SDL\u548c\u60f3\u8981\u6267\u884c\u7684\u67e5\u8be2\u751f\u6210Dart\u4ee3\u7801\u3002<br \/>\n\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u4f7f\u7528\u8be5\u4ee3\u7801\u5728Flutter\u4e2d\u7f16\u5199\u7528\u4e8e\u5728\u5c4f\u5e55\u4e0a\u663e\u793a\u4fe1\u606f\u7684\u4ee3\u7801\u3002<\/p>\n<h3>\u4ee3\u7801\u7684\u81ea\u52a8\u751f\u6210<\/h3>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8023913a08637a6a8d28\/29-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2021-12-13 0.56.04.png\" \/><\/div>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u5728URL\u8f93\u5165\u6846\u4e2d\u8f93\u5165\u76ee\u6807GraphQL\u670d\u52a1\u5668\u7684URL<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u70b9\u51fbDocs<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u70b9\u51fb\u4e09\u4e2a\u70b9<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\u9009\u62e9\u5bfc\u51faSDL<\/ol>\n<p>\u53ef\u4ee5\u4e0b\u8f7d\u3002\u5c06\u8be5\u6587\u4ef6\u653e\u7f6e\u5728\u9879\u76ee\u7684\u6839\u76ee\u5f55\u4e2d\u3002<\/p>\n<p>2. \u521b\u5efa\u4e00\u4e2a\u5305\u542b\u6240\u9700\u67e5\u8be2\u7684\u6587\u4ef6\u3002<\/p>\n<p>\u4e3a\u4e86\u65b9\u4fbf\u5904\u7406\uff0c\u672c\u6b21\u5c06\u6587\u4ef6\u5206\u6210\u4ee5\u4e0b\u4e24\u90e8\u5206\u8fdb\u884c\u81ea\u52a8\u4ee3\u7801\u751f\u6210\u3002<\/p>\n<ul class=\"post-ul\">\u30dd\u30b1\u30e2\u30f3\u306e\u60c5\u5831\u306e\u3069\u306e\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u4f7f\u7528\u3059\u308b\u304b\u5ba3\u8a00\u3059\u308b\u90e8\u5206(fragment)<\/ul>\n<pre class=\"post-pre\"><code><span class=\"k\">fragment<\/span> <span class=\"n\">pokemonField<\/span> <span class=\"k\">on<\/span> <span class=\"n\">Pokemon<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"n\">id<\/span>\r\n  <span class=\"n\">name<\/span>\r\n  <span class=\"n\">image<\/span>\r\n  <span class=\"n\">types<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<ul class=\"post-ul\">\u30af\u30a8\u30ea\u90e8\u5206<\/ul>\n<pre class=\"post-pre\"><code><span class=\"k\">query<\/span> <span class=\"n\">searchPokemons<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"n\">pokemons<\/span><span class=\"p\">(<\/span>\r\n      <span class=\"n\">first<\/span><span class=\"p\">:<\/span> <span class=\"mi\">20<\/span>\r\n  <span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"p\">...<\/span><span class=\"n\">pokemonField<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>3. \u521b\u5efa\u4e0e\u81ea\u52a8\u5316\u751f\u6210\u76f8\u5173\u7684\u8bbe\u7f6e\u6587\u4ef6<br \/>\n\u5728\u9879\u76ee\u7684\u6839\u76ee\u5f55\u4e0b\u653e\u7f6e\u4ee5\u4e0b\u6587\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"na\">targets<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"s\">$default<\/span><span class=\"pi\">:<\/span>\r\n    <span class=\"na\">sources<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">lib\/**<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">schema.graphql<\/span>\r\n    <span class=\"na\">builders<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"na\">artemis<\/span><span class=\"pi\">:<\/span>\r\n        <span class=\"na\">options<\/span><span class=\"pi\">:<\/span>\r\n          <span class=\"na\">fragments_glob<\/span><span class=\"pi\">:<\/span> <span class=\"s\">lib\/gql\/fragment.graphql<\/span>\r\n          <span class=\"na\">schema_mapping<\/span><span class=\"pi\">:<\/span>\r\n            <span class=\"pi\">-<\/span> <span class=\"na\">schema<\/span><span class=\"pi\">:<\/span> <span class=\"s\">schema.graphql<\/span>\r\n              <span class=\"na\">queries_glob<\/span><span class=\"pi\">:<\/span> <span class=\"s\">lib\/gql\/queries\/*.graphql<\/span>\r\n              <span class=\"na\">output<\/span><span class=\"pi\">:<\/span> <span class=\"s\">lib\/gql\/generated\/generated.dart<\/span>\r\n<\/code><\/pre>\n<p>\u5728fragments_glob\u4e2d\u6307\u5b9a\u7528\u4e8efragments\u7684\u5b57\u6bb5\u5b9a\u4e49\u6587\u4ef6\u7684\u4f4d\u7f6e\uff0c<br \/>\n\u5728queries_glob\u4e2d\u6307\u5b9a\u67e5\u8be2\u6587\u4ef6\u7684\u4f4d\u7f6e\uff0c<br \/>\n\u5728output\u4e2d\u6307\u5b9a\u653e\u7f6e\u81ea\u52a8\u751f\u6210\u7684\u4ee3\u7801\u7684\u4f4d\u7f6e\u3002<\/p>\n<p>\u5f53\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u65f6\uff0c\u5c06\u81ea\u52a8\u751f\u6210\u4ee3\u7801\u5230lib\/gql\/generated\/generated.dart\uff0c\u5176\u5185\u5bb9\u4e0e\u4e0a\u8ff0\u914d\u7f6e\u6587\u4ef6\u4e00\u81f4\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c\"># fvm\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u65b9\u306f\u6700\u521d\u306bfvm\u3092\u3064\u3051\u308b<\/span>\r\nflutter pub run build_runner build <span class=\"nt\">--delete-conflicting-outputs<\/span>\r\n<\/code><\/pre>\n<h3>\u4f7f\u7528\u7531Flutter\u751f\u6210\u7684\u4ee3\u7801\u3002<\/h3>\n<p>\u4e3a\u4e86\u5728\u8c03\u7528GraphQL\u670d\u52a1\u5668\u65f6\u9047\u5230\u9519\u8bef\u65f6\u629b\u51fa\u5f02\u5e38\uff0c\u6211\u7f16\u5199\u4e86\u4e00\u4e9b\u590d\u6742\u7684\u4ee3\u7801\uff0c\u4f46\u5982\u679c\u7b80\u5316\u8be5\u90e8\u5206\uff0c\u4ee3\u7801\u5c06\u5982\u4e0b\u6240\u793a\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"kn\">import<\/span> <span class=\"s\">'package:artemis\/artemis.dart'<\/span><span class=\"o\">;<\/span>\r\n<span class=\"kn\">import<\/span> <span class=\"s\">'package:flutter\/material.dart'<\/span><span class=\"o\">;<\/span>\r\n<span class=\"kn\">import<\/span> <span class=\"s\">'package:flutter_graphql_artemis\/gql\/generated\/generated.dart'<\/span><span class=\"o\">;<\/span>\r\n\r\n<span class=\"kt\">void<\/span> <span class=\"nf\">main<\/span><span class=\"p\">(<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n  <span class=\"n\">runApp<\/span><span class=\"o\">(<\/span><span class=\"kd\">const<\/span> <span class=\"n\">MyApp<\/span><span class=\"o\">());<\/span>\r\n<span class=\"o\">}<\/span>\r\n\r\n<span class=\"kd\">class<\/span> <span class=\"nc\">MyApp<\/span> <span class=\"kd\">extends<\/span> <span class=\"n\">StatelessWidget<\/span> <span class=\"o\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"n\">MyApp<\/span><span class=\"o\">({<\/span><span class=\"n\">Key<\/span><span class=\"o\">?<\/span> <span class=\"n\">key<\/span><span class=\"o\">})<\/span> <span class=\"o\">:<\/span> <span class=\"k\">super<\/span><span class=\"o\">(<\/span><span class=\"nl\">key:<\/span> <span class=\"n\">key<\/span><span class=\"o\">);<\/span>\r\n  <span class=\"nd\">@override<\/span>\r\n  <span class=\"n\">Widget<\/span> <span class=\"n\">build<\/span><span class=\"o\">(<\/span><span class=\"n\">BuildContext<\/span> <span class=\"n\">context<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"n\">MaterialApp<\/span><span class=\"o\">(<\/span>\r\n      <span class=\"nl\">title:<\/span> <span class=\"s\">'Flutter Demo'<\/span><span class=\"o\">,<\/span>\r\n      <span class=\"nl\">theme:<\/span> <span class=\"n\">ThemeData<\/span><span class=\"o\">(<\/span>\r\n        <span class=\"nl\">primarySwatch:<\/span> <span class=\"n\">Colors<\/span><span class=\"o\">.<\/span><span class=\"na\">blue<\/span><span class=\"o\">,<\/span>\r\n      <span class=\"o\">),<\/span>\r\n      <span class=\"nl\">home:<\/span> <span class=\"kd\">const<\/span> <span class=\"n\">PokemonListView<\/span><span class=\"o\">(),<\/span>\r\n    <span class=\"o\">);<\/span>\r\n  <span class=\"o\">}<\/span>\r\n<span class=\"o\">}<\/span>\r\n\r\n<span class=\"kd\">class<\/span> <span class=\"nc\">PokemonListView<\/span> <span class=\"kd\">extends<\/span> <span class=\"n\">StatelessWidget<\/span> <span class=\"o\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"n\">PokemonListView<\/span><span class=\"o\">({<\/span><span class=\"n\">Key<\/span><span class=\"o\">?<\/span> <span class=\"n\">key<\/span><span class=\"o\">})<\/span> <span class=\"o\">:<\/span> <span class=\"k\">super<\/span><span class=\"o\">(<\/span><span class=\"nl\">key:<\/span> <span class=\"n\">key<\/span><span class=\"o\">);<\/span>\r\n\r\n  <span class=\"nd\">@override<\/span>\r\n  <span class=\"n\">Widget<\/span> <span class=\"n\">build<\/span><span class=\"o\">(<\/span><span class=\"n\">BuildContext<\/span> <span class=\"n\">context<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"n\">Scaffold<\/span><span class=\"o\">(<\/span>\r\n      <span class=\"nl\">appBar:<\/span> <span class=\"n\">AppBar<\/span><span class=\"o\">(<\/span>\r\n        <span class=\"nl\">title:<\/span> <span class=\"kd\">const<\/span> <span class=\"n\">Text<\/span><span class=\"o\">(<\/span><span class=\"s\">'Pokemon List'<\/span><span class=\"o\">),<\/span>\r\n      <span class=\"o\">),<\/span>\r\n      <span class=\"nl\">body:<\/span> <span class=\"n\">FutureBuilder<\/span><span class=\"o\">&lt;<\/span><span class=\"n\">List<\/span><span class=\"o\">&lt;<\/span><span class=\"n\">PokemonFieldMixin<\/span><span class=\"o\">?&gt;?&gt;(<\/span>\r\n        <span class=\"nl\">future:<\/span> <span class=\"n\">searchPokemons<\/span><span class=\"o\">(),<\/span>\r\n        <span class=\"nl\">builder:<\/span> <span class=\"o\">(<\/span><span class=\"n\">context<\/span><span class=\"o\">,<\/span> <span class=\"n\">snapshot<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n          <span class=\"k\">if<\/span> <span class=\"o\">(<\/span><span class=\"n\">snapshot<\/span><span class=\"o\">.<\/span><span class=\"na\">connectionState<\/span> <span class=\"o\">!=<\/span> <span class=\"n\">ConnectionState<\/span><span class=\"o\">.<\/span><span class=\"na\">done<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n            <span class=\"k\">return<\/span> <span class=\"kd\">const<\/span> <span class=\"n\">Center<\/span><span class=\"o\">(<\/span><span class=\"nl\">child:<\/span> <span class=\"n\">CircularProgressIndicator<\/span><span class=\"o\">());<\/span>\r\n          <span class=\"o\">}<\/span>\r\n          <span class=\"kd\">final<\/span> <span class=\"n\">pokemons<\/span> <span class=\"o\">=<\/span> <span class=\"n\">snapshot<\/span><span class=\"o\">.<\/span><span class=\"na\">data<\/span><span class=\"o\">;<\/span>\r\n          <span class=\"k\">if<\/span> <span class=\"o\">(<\/span><span class=\"n\">pokemons<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n            <span class=\"k\">return<\/span> <span class=\"kd\">const<\/span> <span class=\"n\">Center<\/span><span class=\"o\">(<\/span><span class=\"nl\">child:<\/span> <span class=\"n\">Text<\/span><span class=\"o\">(<\/span><span class=\"s\">'\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f.'<\/span><span class=\"o\">));<\/span>\r\n          <span class=\"o\">}<\/span>\r\n          <span class=\"k\">return<\/span> <span class=\"n\">ListView<\/span><span class=\"o\">.<\/span><span class=\"na\">separated<\/span><span class=\"o\">(<\/span>\r\n            <span class=\"nl\">itemCount:<\/span> <span class=\"n\">pokemons<\/span><span class=\"o\">.<\/span><span class=\"na\">length<\/span><span class=\"o\">,<\/span>\r\n            <span class=\"nl\">separatorBuilder:<\/span> <span class=\"o\">(<\/span><span class=\"n\">context<\/span><span class=\"o\">,<\/span> <span class=\"n\">index<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n              <span class=\"k\">return<\/span> <span class=\"kd\">const<\/span> <span class=\"n\">Divider<\/span><span class=\"o\">(<\/span><span class=\"nl\">height:<\/span> <span class=\"mf\">0.5<\/span><span class=\"o\">);<\/span>\r\n            <span class=\"o\">},<\/span>\r\n            <span class=\"nl\">itemBuilder:<\/span> <span class=\"o\">(<\/span><span class=\"n\">context<\/span><span class=\"o\">,<\/span> <span class=\"n\">index<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n              <span class=\"kd\">final<\/span> <span class=\"n\">pokemon<\/span> <span class=\"o\">=<\/span> <span class=\"n\">pokemons<\/span><span class=\"o\">[<\/span><span class=\"n\">index<\/span><span class=\"o\">];<\/span>\r\n              <span class=\"k\">if<\/span> <span class=\"o\">(<\/span><span class=\"n\">pokemon<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n                <span class=\"k\">return<\/span> <span class=\"kd\">const<\/span> <span class=\"n\">SizedBox<\/span><span class=\"o\">();<\/span>\r\n              <span class=\"o\">}<\/span>\r\n              <span class=\"k\">return<\/span> <span class=\"n\">ListTile<\/span><span class=\"o\">(<\/span>\r\n                <span class=\"nl\">leading:<\/span> <span class=\"n\">CircleAvatar<\/span><span class=\"o\">(<\/span>\r\n                  <span class=\"nl\">backgroundImage:<\/span> <span class=\"n\">NetworkImage<\/span><span class=\"o\">(<\/span><span class=\"n\">pokemon<\/span><span class=\"o\">.<\/span><span class=\"na\">image<\/span><span class=\"o\">!),<\/span>\r\n                  <span class=\"nl\">backgroundColor:<\/span> <span class=\"n\">Colors<\/span><span class=\"o\">.<\/span><span class=\"na\">grey<\/span><span class=\"o\">,<\/span>\r\n                <span class=\"o\">),<\/span>\r\n                <span class=\"c1\">\/\/ GraphQL\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u88dc\u5b8c\u304c\u52b9\u304f+\u30c7\u30fc\u30bf\u578b\u304cString?\u3067\u3042\u308b\u3053\u3068\u3082\u5206\u304b\u308b<\/span>\r\n                <span class=\"nl\">title:<\/span> <span class=\"n\">Text<\/span><span class=\"o\">(<\/span><span class=\"n\">pokemon<\/span><span class=\"o\">.<\/span><span class=\"na\">name<\/span><span class=\"o\">!),<\/span>\r\n                <span class=\"nl\">subtitle:<\/span> <span class=\"n\">Text<\/span><span class=\"o\">(<\/span><span class=\"s\">'Type: <\/span><span class=\"si\">${pokemon.types!.join(',')}<\/span><span class=\"s\">'<\/span><span class=\"o\">),<\/span>\r\n              <span class=\"o\">);<\/span>\r\n            <span class=\"o\">},<\/span>\r\n          <span class=\"o\">);<\/span>\r\n        <span class=\"o\">},<\/span>\r\n      <span class=\"o\">),<\/span>\r\n    <span class=\"o\">);<\/span>\r\n  <span class=\"o\">}<\/span>\r\n\r\n  <span class=\"c1\">\/\/ fragment\u3067\u5206\u3051\u3066\u304a\u3044\u305f\u306e\u3067PokemonFieldMixin\u3068\u5ba3\u8a00\u3067\u304d\u308b<\/span>\r\n  <span class=\"n\">Future<\/span><span class=\"o\">&lt;<\/span><span class=\"n\">List<\/span><span class=\"o\">&lt;<\/span><span class=\"n\">PokemonFieldMixin<\/span><span class=\"o\">?&gt;?&gt;<\/span> <span class=\"n\">searchPokemons<\/span><span class=\"o\">()<\/span> <span class=\"n\">async<\/span> <span class=\"o\">{<\/span>\r\n    <span class=\"kd\">final<\/span> <span class=\"n\">_httpLink<\/span> <span class=\"o\">=<\/span>\r\n        <span class=\"n\">Uri<\/span><span class=\"o\">.<\/span><span class=\"na\">parse<\/span><span class=\"o\">(<\/span><span class=\"s\">'https:\/\/graphql-pokemon2.vercel.app'<\/span><span class=\"o\">).<\/span><span class=\"na\">toString<\/span><span class=\"o\">();<\/span>\r\n    <span class=\"kd\">final<\/span> <span class=\"n\">client<\/span> <span class=\"o\">=<\/span> <span class=\"n\">ArtemisClient<\/span><span class=\"o\">(<\/span><span class=\"n\">_httpLink<\/span><span class=\"o\">);<\/span>\r\n    <span class=\"c1\">\/\/ SearchPokemonsQuery()\u304c\u30af\u30a8\u30ea\u304b\u3089\u81ea\u52d5\u751f\u6210\u3057\u305f\u90e8\u5206<\/span>\r\n    <span class=\"kd\">final<\/span> <span class=\"n\">response<\/span> <span class=\"o\">=<\/span> <span class=\"n\">await<\/span> <span class=\"n\">client<\/span><span class=\"o\">.<\/span><span class=\"na\">execute<\/span><span class=\"o\">(<\/span><span class=\"n\">SearchPokemonsQuery<\/span><span class=\"o\">());<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"n\">response<\/span><span class=\"o\">.<\/span><span class=\"na\">data<\/span><span class=\"o\">!.<\/span><span class=\"na\">pokemons<\/span><span class=\"o\">;<\/span>\r\n  <span class=\"o\">}<\/span>\r\n<span class=\"o\">}<\/span>\r\n<\/code><\/pre>\n<p>The general flow is outlined as follows: \u5927\u81f4\u7684\u6d41\u7a0b\u5982\u4e0b\u3002<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u4f7f\u7528FutureBuilder\u5411Pokemon GraphQL\u670d\u52a1\u5668\u53d1\u51fa\u67e5\u8be2<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u5728\u6536\u5230\u54cd\u5e94\u4e4b\u524d\uff0c\u663e\u793a\u52a0\u8f7d\u753b\u9762<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\u4e00\u65e6\u6536\u5230\u54cd\u5e94\uff0c\u4f7f\u7528\u8be5\u6570\u636e\u521b\u5efaListView\u3002<\/ol>\n<p>\u6211\u5c06\u5728\u8fd9\u91cc\u5199\u4e0b\u6211\u60f3\u8981\u5173\u6ce8\u7684\u8981\u70b9\u3002<\/p>\n<p>\u7531\u4e8e\u53ef\u4ee5\u81ea\u52a8\u751f\u6210\u4ee3\u7801\u4ece\u67e5\u8be2\u4e2d\uff0c\u6240\u4ee5\u5728Dart\u4e2d\u4e0d\u9700\u8981\u8d39\u529b\u5730\u521b\u5efa\u67e5\u8be2\u5b57\u7b26\u4e32\u3002<\/p>\n<p>\u6211\u4ee5\u524d\u5728\u4e0d\u4f7f\u7528 Artemis \u65f6\u52aa\u529b\u5c1d\u8bd5\u4f7f\u7528 Dart \u7684 String \u7f16\u5199\u67e5\u8be2\uff0c\u4f46\u8fd9\u4e2a\u8fc7\u7a0b\u975e\u5e38\u75db\u82e6\uff0c\u4e0d\u63a8\u8350\u8fd9\u79cd\u65b9\u6cd5\u3002\u968f\u7740\u67e5\u8be2\u6240\u9700\u53c2\u6570\u7684\u589e\u52a0\uff0c\u4f7f\u7528\u5b57\u7b26\u4e32\u7ba1\u7406\u67e5\u8be2\u53d8\u5f97\u8d8a\u6765\u8d8a\u56f0\u96be\u3002\u5c3d\u7ba1\u521d\u59cb\u8bbe\u7f6e\u53ef\u80fd\u6709\u4e9b\u9ebb\u70e6\uff0c\u4f46\u6211\u5efa\u8bae\u4f7f\u7528\u81ea\u52a8\u751f\u6210\u7684\u65b9\u5f0f\u3002<\/p>\n<p>\u8fc7\u53bb\uff0c\u6211\u66fe\u7ecf\u5b9e\u73b0\u4e86\u4e00\u79cd\u5c06\u53d8\u91cf\u5d4c\u5165\u5b57\u7b26\u4e32\u7684\u65b9\u6cd5\uff0c\u4f46\u8fd9\u6837\u505a\u975e\u5e38\u56f0\u96be\u3002<\/p>\n<pre class=\"post-pre\"><code>  <span class=\"kd\">final<\/span> <span class=\"kt\">String<\/span> <span class=\"n\">_defaultProperty<\/span> <span class=\"o\">=<\/span> <span class=\"s\">'''\r\n    id\r\n    name\r\n    members {\r\n      <\/span><span class=\"si\">${UserRepository.defaultProperty}<\/span><span class=\"s\">\r\n    }\r\n  '''<\/span><span class=\"o\">;<\/span>\r\n  <span class=\"kd\">final<\/span> <span class=\"kt\">String<\/span> <span class=\"n\">_defaultGetQuery<\/span> <span class=\"o\">=<\/span> <span class=\"sx\">r''<\/span><span class=\"s\">'\r\n    query{\r\n      teams(\r\n        first: 10\r\n        <\/span><span class=\"si\">${queries}<\/span><span class=\"s\">\r\n      ){\r\n        data{\r\n          <\/span><span class=\"si\">${defaultProperty}<\/span><span class=\"s\">\r\n        }\r\n      }\r\n    }\r\n  '''<\/span><span class=\"o\">;<\/span>\r\n\r\n<\/code><\/pre>\n<p>\u8bf7\u7528\u4e2d\u6587\u5c06\u4ee5\u4e0b\u5185\u5bb9\u6539\u8ff0\uff0c\u53ea\u9700\u8981\u4e00\u79cd\u9009\u9879\uff1a<\/p>\n<p>In my opinion, the best way to learn a new language is by immersing oneself in the culture of the country where the language is spoken. This includes interacting with native speakers, reading books and watching movies in the target language, and practicing speaking and writing as much as possible.<\/p>\n<p>\u901a\u8fc7\u81ea\u52a8\u751f\u6210\u7684\u4ee3\u7801\uff0c\u80fd\u6e05\u695a\u5730\u4e86\u89e3\u54cd\u5e94\u7684\u6570\u636e\u7ed3\u6784\u548c\u6570\u636e\u7c7b\u578b\u3002<\/p>\n<p>\u6211\u7406\u89e3\u4e0b\u9762\u7684\u90e8\u5206\u662f\u6307\u8c03\u7528SearchPokemonsQuery()\u540e\uff0c\u6570\u636e\u4e0b\u9762\u6709\u4e00\u4e2a\u7c7b\u578b\u4e3aList&lt;PokemonFieldMixin?&gt;\u7684\u5217\u8868\uff0c\u5bf9\u5417\uff1f<\/p>\n<pre class=\"post-pre\"><code>  <span class=\"n\">Future<\/span><span class=\"o\">&lt;<\/span><span class=\"n\">List<\/span><span class=\"o\">&lt;<\/span><span class=\"n\">PokemonFieldMixin<\/span><span class=\"o\">?&gt;?&gt;<\/span> <span class=\"n\">searchPokemons<\/span><span class=\"o\">()<\/span> <span class=\"n\">async<\/span> <span class=\"o\">{<\/span>\r\n    <span class=\"kd\">final<\/span> <span class=\"n\">_httpLink<\/span> <span class=\"o\">=<\/span>\r\n        <span class=\"n\">Uri<\/span><span class=\"o\">.<\/span><span class=\"na\">parse<\/span><span class=\"o\">(<\/span><span class=\"s\">'https:\/\/graphql-pokemon2.vercel.app'<\/span><span class=\"o\">).<\/span><span class=\"na\">toString<\/span><span class=\"o\">();<\/span>\r\n    <span class=\"kd\">final<\/span> <span class=\"n\">client<\/span> <span class=\"o\">=<\/span> <span class=\"n\">ArtemisClient<\/span><span class=\"o\">(<\/span><span class=\"n\">_httpLink<\/span><span class=\"o\">);<\/span>\r\n    <span class=\"c1\">\/\/ SearchPokemonsQuery()\u304c\u30af\u30a8\u30ea\u304b\u3089\u81ea\u52d5\u751f\u6210\u3057\u305f\u90e8\u5206<\/span>\r\n    <span class=\"kd\">final<\/span> <span class=\"n\">response<\/span> <span class=\"o\">=<\/span> <span class=\"n\">await<\/span> <span class=\"n\">client<\/span><span class=\"o\">.<\/span><span class=\"na\">execute<\/span><span class=\"o\">(<\/span><span class=\"n\">SearchPokemonsQuery<\/span><span class=\"o\">());<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"n\">response<\/span><span class=\"o\">.<\/span><span class=\"na\">data<\/span><span class=\"o\">!.<\/span><span class=\"na\">pokemons<\/span><span class=\"o\">;<\/span>\r\n  <span class=\"o\">}<\/span>\r\n<\/code><\/pre>\n<p>\u8fdb\u4e00\u6b65\u89c2\u5bdf\u81ea\u52a8\u751f\u6210\u7684\u4ee3\u7801\uff0c\u53ef\u4ee5\u653e\u5fc3\u5730\u4f7f\u7528PokemonFieldMixin\u7684\u5c5e\u6027\uff0c\u56e0\u4e3a\u5b83\u4eec\u90fd\u660e\u786e\u5730\u58f0\u660e\u4e86\u7c7b\u578b\u3002\u5982\u679c\u6ca1\u6709\u81ea\u52a8\u751f\u6210\uff0c\u5c06\u4e0d\u5f97\u4e0d\u5c06\u6240\u6709\u5c5e\u6027\u4ecedynamic\u7c7b\u578b\u8f6c\u6362\uff0c\u6240\u4ee5\u6211\u5efa\u8bae\u4f7f\u7528\u81ea\u52a8\u751f\u6210\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"n\">mixin<\/span> <span class=\"n\">PokemonFieldMixin<\/span> <span class=\"o\">{<\/span>\r\n  <span class=\"n\">late<\/span> <span class=\"kt\">String<\/span> <span class=\"n\">id<\/span><span class=\"o\">;<\/span>\r\n  <span class=\"kt\">String<\/span><span class=\"o\">?<\/span> <span class=\"n\">name<\/span><span class=\"o\">;<\/span>\r\n  <span class=\"kt\">String<\/span><span class=\"o\">?<\/span> <span class=\"n\">image<\/span><span class=\"o\">;<\/span>\r\n  <span class=\"n\">List<\/span><span class=\"o\">&lt;<\/span><span class=\"kt\">String<\/span><span class=\"o\">?&gt;?<\/span> <span class=\"n\">types<\/span><span class=\"o\">;<\/span>\r\n<span class=\"o\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u6700\u7ec8\u3001\u6700\u540e\u3001\u6700\u540e\u4e00\u6bb5<\/h2>\n<p>\u4f60\u8ba4\u4e3a\u5982\u4f55\u5462\uff1f\u6211\u5e0c\u671b\u4f60\u89c9\u5f97\u5728Flutter\u4e2d\u4f7f\u7528GraphQL\u6bd4\u60f3\u8c61\u4e2d\u5bb9\u6613\u548c\u65b9\u4fbf\u3002<\/p>\n<p>\u5982\u679c\u60a8\u5bf9\u6b64\u611f\u5174\u8da3\uff0c\u8bf7\u52a1\u5fc5\u8bd5\u7740\u8fd0\u884c\u4e00\u4e0b\uff0c\u6211\u5df2\u63d0\u4f9b\u4e86\u4e00\u4e9b\u793a\u4f8b\u4ee3\u7801\u3002<\/p>\n<p>\u90a3\u4e48\uff0c\u795d\u4f60\u7684Flutter\u751f\u6d3b\u6109\u5feb\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9996\u5148 \u4f60\u4f7f\u7528\u8fc7GraphQL\u5417\uff1f \u5728\u6211\u4e2a\u4eba\u5236\u4f5c\u670d\u52a1\u65f6\uff0c\u6211\u559c\u6b22\u4f7f\u7528GraphQL\u3002\u6211\u7279\u522b\u559c\u6b22\u4f7f\u7528GraphQL\u7684 [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-47598","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528Flutter\u548cGraphQL - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528flutter\u548cgraphql\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528Flutter\u548cGraphQL\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u4f60\u4f7f\u7528\u8fc7GraphQL\u5417\uff1f \u5728\u6211\u4e2a\u4eba\u5236\u4f5c\u670d\u52a1\u65f6\uff0c\u6211\u559c\u6b22\u4f7f\u7528GraphQL\u3002\u6211\u7279\u522b\u559c\u6b22\u4f7f\u7528GraphQL\u7684 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528flutter\u548cgraphql\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-03T00:38:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-03T21:36:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8023913a08637a6a8d28\/8-0.png\" \/>\n<meta name=\"author\" content=\"\u79d1, \u96c5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u96c5\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/\",\"name\":\"\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528Flutter\u548cGraphQL - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-09-03T00:38:51+00:00\",\"dateModified\":\"2024-05-03T21:36:56+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528Flutter\u548cGraphQL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\",\"name\":\"\u79d1, \u96c5\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u96c5\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528Flutter\u548cGraphQL - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528flutter\u548cgraphql\/","og_locale":"zh_CN","og_type":"article","og_title":"\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528Flutter\u548cGraphQL","og_description":"\u9996\u5148 \u4f60\u4f7f\u7528\u8fc7GraphQL\u5417\uff1f \u5728\u6211\u4e2a\u4eba\u5236\u4f5c\u670d\u52a1\u65f6\uff0c\u6211\u559c\u6b22\u4f7f\u7528GraphQL\u3002\u6211\u7279\u522b\u559c\u6b22\u4f7f\u7528GraphQL\u7684 [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528flutter\u548cgraphql\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-09-03T00:38:51+00:00","article_modified_time":"2024-05-03T21:36:56+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8023913a08637a6a8d28\/8-0.png"}],"author":"\u79d1, \u96c5","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u96c5","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/","name":"\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528Flutter\u548cGraphQL - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-09-03T00:38:51+00:00","dateModified":"2024-05-03T21:36:56+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528Flutter\u548cGraphQL"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a","name":"\u79d1, \u96c5","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","caption":"\u79d1, \u96c5"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e8%ae%a9%e6%88%91%e4%bb%ac%e5%b0%9d%e8%af%95%e4%bd%bf%e7%94%a8flutter%e5%92%8cgraphql\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=47598"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47598\/revisions"}],"predecessor-version":[{"id":96433,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47598\/revisions\/96433"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=47598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=47598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=47598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}